API

Tabs has a powerful JavaScript API that makes it extremely easy for developers to programatically interact with tabs and respond to events.

On this page

Getting started

All API methods and events are available on the window.Station.Apps.Tabs object after the {% include 'station-tabs' %} snippet has been rendered by the theme.

Example 
<!-- layout/theme.liquid -->

<body>

  ...

  {{ content_for_layout }}
  {% include 'station-tabs' %}

  ...

  <script>
    window.Station.Apps.Tabs.on('ready', function(){
      console.log('Tabs are ready');
    });
  </script>

  ...

</body>

You can also use the  Custom JavaScript area under Settings > Scripts in the app.

JavaScript added there will be run after the API has been initialized but before the tabs are constructed, allowing you to easily modify any settings prior to the tabs being displayed.

The 'Custom JavaScript' area lets you easily interact with the API through the app
The 'Custom JavaScript' area lets you easily interact with the API through the app

Methods

.on()

.on(event, callback) Register a callback for an event. Parameters
event string, required The name of the event to watch for. Available values are: open string Fires when a tab is opened. See the open event for more information. ready string Fires when the tabs are constructed and ready for interaction. See the ready event for more information. transitionEnd string Fires when a tab content panel finishes animating open or closed. See the transitionEnd event for more information. callback function, required The function to be called when the specified event is fired. The callback function is bound to the Station.Apps.Tabs object.
Example 
Station.Apps.Tabs.on('ready', function(){
  console.log('Tabs are ready');
});

// Output
'Tabs are ready'

.open()

.open(id, options) Open a tab using the tab ID. Parameters
id string, required The href value of the tab link to open. options object A JSON object of options. animate: true boolean Animate the opening of the tab (vertical layout only). deepLink: true boolean Add the tab id to the URL parameters. preventClose: true boolean Prevent the tab from closing if it's already open (vertical layout only). scrollIntoView: false boolean Scroll the tab into view. Uses element.scrollIntoView, so behaviour is dependent on the browser. skipCallback: false boolean Prevent the .on('open') event from firing.
Returns Returns an object containing the tab content, instance and link elements.
content object The tab's content element. instance object The tab group's wrapping element. link object The tab's link element.
Example 
Station.Apps.Tabs.open('description_0-1', {
 animate: true,
 deepLink: true,
 preventClose: true,
 scrollIntoView: false,
 skipCallback: false
});

// Return
{
 content: {...},
 instance: {...},
 link: {...}
}

.openByTitle()

.openByTitle(title, options) Open a tab using the tab title. Parameters
title string, required The title of the tab link. If multiple tabs have the same title then only the first one will be opened. options object A JSON object of options. animate: true boolean Animate the opening of the tab (vertical layout only). deepLink: true boolean Add the tab id to the URL parameters. preventClose: true boolean Prevent the tab from closing if it's already open (vertical layout only). scrollIntoView: false boolean Scroll the tab into view. Uses element.scrollIntoView, so behaviour is dependent on the browser. skipCallback: false boolean Prevent the .on('open') event from firing.
Returns Returns an object containing the tab content, instance and link elements.
content object The tab's content element. instance object The tab group's wrapping element. link object The tab's link element.
Example 
Station.Apps.Tabs.openByTitle('Reviews', {
 animate: true,
 deepLink: true,
 preventClose: true,
 scrollIntoView: false,
 skipCallback: false
});

// Return
{
 content: {...},
 instance: {...},
 link: {...}
}

.settings

.settings Return an object containing the app settings. You can use the custom JavaScript panel under Settings > Scripts to programatically change the settings before the app is initialized. Example 
Station.Apps.Tabs.settings

// Return
{
 clean_content: true
 clean_content_level: "no_attrs"
 clean_content_nodes: (4) ["div", "span", "section", "article"]
 deep_links: true
 dev_mode: false
 fix_known_issues: true
 force_full: false
 force_wrap: false
 full_open: true
 full_single_active: true
 product_autosplit: true
 product_autosplit_heading: "h4"
 product_description_tab: true
 product_description_tab_title: "Description"
 show_content_after: false
}

.version

.version Return a string containing the semantic version of the app that the theme is using. Example 
Station.Apps.Tabs.version

// Return
"2.3.2"

Events

Events to be used by the .on() method.

open

open Fires when a tab is opened. An object with the following properties is passed to the callback function:
content object The tab's content element. instance object The tab group's wrapping element. link object The tab's link element.
Example 
(function(tabs) {

  tabs.on('open', function(data) {
    let videos = data.content.getElementsByTagName('video');
    videos[0].play();
  });

})(Station.Apps.Tabs);

ready

ready Fires when the tabs are constructed and ready for interaction. The ready event should be used any time a script needs to be run when the page loads. Example 
(function(tabs) {

  tabs.on('ready', function() {
    // Tabs are ready for interaction
  });

})(Station.Apps.Tabs);

transitionEnd

transitionEnd Fires when a tab content panel finishes animating open or closed. An object with the following properties is passed to the callback function:
content object The tab's content element. instance object The tab group's wrapping element. link object The tab's link element.
Example 
(function(tabs) {

  tabs.on('transitionEnd', function(data) {
    if (data.content.classList.contains('is-active')) {
      let height = data.content.offsetHeight;
      console.log(height);
    }
  });

})(Station.Apps.Tabs);