Tab-Responsive tab-responsive.js

The primary goal with this widget is to provide a method of communication between the Collapse and Tab widgets. It does not take into account the visual aspects itself, this needs to be handled by CSS.

Widget Dependencies

Sideshow requires the following:

Contents

Example

This example uses a breakpoint of 62em/992px. Larger widths will see the tab style navigation, smaller widths will see a simple accordion using headers as the collapse triggers. If you change the browser width between the two sides of the breakpoint, you will see the active tab becomes the active collapse, and vice-versa.

First Tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nisi ipsum. Quisque feugiat, arcu in pulvinar varius; risus odio interdum diam; a hendrerit urna sem vitae enim. Aenean fermentum iaculis nibh sodales consectetur.

Second Tab

Praesent tristique dolor quis condimentum lobortis. Phasellus accumsan lacus vitae quam elementum, non euismod urna adipiscing. Suspendisse sodales enim non sem consequat dictum. Ut sit amet elementum purus, mattis rhoncus elit.

Third Tab

Nullam malesuada massa urna, non gravida odio scelerisque sit amet. Donec sit amet rutrum quam, vel faucibus ante. Sed iaculis aliquet tortor vel tristique? In ligula nisi, suscipit vel ipsum id; elementum iaculis dui.

<div data-cfw="tabResponsive" class="cf-example-tabResponsive">
    <ul class="nav nav-tabs">
        <li class="nav-item"><a href="#tabr0" class="nav-link" data-cfw="tab">First Tab</a></li>
        <li class="nav-item"><a href="#tabr1" class="nav-link" data-cfw="tab">Second Tab</a></li>
        <li class="nav-item"><a href="#tabr2" class="nav-link" data-cfw="tab">Third Tab</a></li>
    </ul>
    <div class="tab-content">
        <div id="tabr0" class="tab-pane">
            <h4><a href="#tabr0_collapse" data-cfw="collapse">First Tab <span class="caret"></span></a></h4>
            <div  id="tabr0_collapse" class="collapse">
                ...
            </div>
        </div>
        <div id="tabr1" class="tab-pane">
            <h4><a href="#tabr1_collapse" data-cfw="collapse">Second Tab <span class="caret"></span></a></h4>
            <div  id="tabr1_collapse" class="collapse">
                ...
            </div>
        </div>
        <div id="tabr2" class="tab-pane">
            <h4><a href="#tabr2_collapse" data-cfw="collapse">Third Tab <span class="caret"></span></a></h4>
            <div  id="tabr2_collapse" class="collapse">
                ...
            </div>
        </div>
    </div>
</div>
/* Example CSS */
@media (min-width: 62em) {
    .cf-example-tabResponsive h4 {
        display: none;
    }
    .cf-example-tabResponsive .collapse {
        display: block;
        visibility: visible;
    }
}
@media (max-width: 61.9375em) {
    .cf-example-tabResponsive .nav-tabs {
        display: none;
    }
    .cf-example-tabResponsive .tab-pane {
        display: block;
        visibility: visible;
    }
}

Usage

To set up a responsive tab, all tabs must be under the same resposive tab ancestor, and then one collapse item per tab-pane is needed.

You must provide the necessary CSS to determine how items should appear across breakpoints. For example, you can hide the collapse triggers on desktops, but show on mobile devices where the tabs are hidden.

Via Data Attributes

Add data-cfw="tabResponsive" to the ancestor element that contains all the tab and collapse items to be associated.

Via JavaScript

Call the widget via JavaScript:

$('#myTabResponsive').CFW_TabResponsive();

Options

None.

Methods

.CFW_TabResponsive()

Activates the responsive tab element.

$('#myTabResponsive').CFW_TabResponsive();

Events

Event callbacks happen on the responsive tab element.

You can also get the collapse and tab events as indicated in the Collapse and Tab widgets due to event bubbling.

Event Type Description
init.cfw.tabResponsive This event fires after the responsive tab item is initialized.