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-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>
Dropdown 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="tabs1" 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-transform-resolution="1200"
data-tabs-mobile-type="slide-up-down"
data-btn-classes="btn btn-block btn-sm btn-primary">
<li class="nav-mobile-item nav-item">
<a class="nav-mobile-link nav-link px-2 pb-2 active" href="#tabs1-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="#tabs1-tab2" role="tab" aria-selected="false"
data-toggle="tab">Tab 2
</a>
</li>
</ul>
</div>
</div>
<div id="tabsContent1" class="card-body tab-content p-0">
<div class="tab-pane fade show active p-3 px-md-4" id="tabs1-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="tabs1-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>
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>
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 |
|---|---|
|
|
determines the type of tabs on resolution less than 768px. Admissable significances are: slide-up-down | accordion
|
|
|
if data-tabs-mobile-type = "slide-up-down" or data-tabs-mobile-type = "accordion", then it accepts classes for styling buttons on mobile resolution. |
|
|
indicates below what resolution the tabs will be transformed in the dropdown. |
|
|
data-target ID block with tabs. |
