Tabs

About

Tabs — is a widget component to show content in multiple panels, each associated with a header in a list.

View Source Code

Initialization

Static HTML initialization:

<div data-content-type="tabs" data-mage-init='{"tabs": {}}'>
    <div class="tab-header" data-role="collapsible">
        <a data-toggle="trigger" href="#tab-cars">Cars</a>
    </div>
    <div id="tab-cars" data-role="content">Cars content</div>

    <div class="tab-header" data-role="collapsible">
        <a data-toggle="trigger" href="#tab-movies">Movies</a>
    </div>
    <div id="tab-movies" data-role="content">Movies content</div>

    <div class="tab-header" data-role="collapsible">
        <a data-toggle="trigger" href="#tab-music">Music</a>
    </div>
    <div id="tab-music" data-role="content">Music content</div>
</div>

JS initialization:

$('.selector').tabs();

Options

Here is a list of tabs options:

$(el).tabs({
    active: 0,
    collapsibleElement: '[data-role=collapsible]',
    header: '[data-role=title]',
    content: '[data-role=content]',
    trigger: '[data-role=trigger]'
});