Bootstrap Tabs

Nova uses Bootstrap’s tab JavaScript plugin.

How to use?

Wrap any block in a parent element with an ID or class and add the same ID in the JS init function of the hs.bs-tabs.js plugin.

Copy-paste the following <script> near the end of your pages under JS Nova to enable it.

<script src="../../assets/js/components/hs.bs-tabs.js"></script>
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of tabs
    $.HSCore.components.HSBSTabs.init('.js-tabs-to-dropdown');
  });
</script>
Copy

Accordion example

Shrink down the resolution of your device to see the how it lines up on small resolutions.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. 
<div class="px-3 px-xl-0">
  <div class="nav-mobile-container">
    <ul id="tabs2" class="js-tabs-to-dropdown nav nav-v2 nav-tabs nav-mobile nav-mobile-right nav-mobile-shade nav-primary w-100 w-md-auto text-uppercase px-xl-4" role="tablist"
        data-target="tabsContent2"
        data-transform-resolution="1200"
        data-tabs-mobile-type="accordion"
        data-btn-classes="btn btn-block btn-sm btn-primary my-2">
      <li class="nav-mobile-item nav-item">
        <a class="nav-mobile-link nav-link px-2 pb-2 active" href="#tabs2-tab1" role="tab" aria-selected="true"
           data-toggle="tab">Tab 1
        </a>
      </li>
      <li class="nav-mobile-item nav-item ml-4">
        <a class="nav-mobile-link nav-link px-2 pb-2" href="#tabs2-tab2" role="tab" aria-selected="false"
           data-toggle="tab">Tab 2
        </a>
      </li>
    </ul>
  </div>
</div>

<div id="tabsContent2" class="card-body tab-content p-0">
  <div class="tab-pane fade show active p-3 px-md-4" id="tabs2-tab1" role="tabpanel">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  </div>

  <div class="tab-pane fade p-3 px-md-4" id="tabs2-tab2" role="tabpanel">
    Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
  </div>
</div>
Copy

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-tabs-mobile-type="".

Attribute Description

data-tabs-mobile-type

determines the type of tabs on resolution less than 768px.

Admissable significances are: slide-up-down | accordion

  • slide-up-down – switches on the mode of drop-down tabs.

    Screenshot:

    Image description
  • accordion - Enables accordion mode for tabs. When clicking on the tab, the previous tab shouts down.

    Screenshot:

    Image description

data-btn-classes

 if data-tabs-mobile-type = "slide-up-down" or data-tabs-mobile-type = "accordion", then it accepts classes for styling buttons on mobile resolution.

data-transform-resolution

 indicates below what resolution the tabs will be transformed in the dropdown.

data-target

 data-target ID block with tabs.