Tabs

In order to make tabs works, add these files. assets/css/rdta/components/rdta-tabs.css, assets/js/rdta/components/rdta-tabs.js

Examples

Please note that the borders with dashed line around the examples are only appears in this document just to let you know its boundary.

Basic tabs HTML element.

RDTA tabs
Proin dolor
Aenean lacinia

RDTA can use basic element and few CSS class by default. Here is an example.

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

Source

To make tabs work, it must be manually activate once document loaded.

document.addEventListener('DOMContentLoaded', function() {
    RDTATabs.init('.tabs');
});

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

Source

<div class="tabs">
    <ol>
        <li><a href="#tabs2-1">...</a></li>
        ...
    </ol>
    <div id="tabs2-1">...</div>
    ...
</div>

With pre-defined CSS classes.

RDTA can also use pre-defined CSS classes. Usually these classes will be automatically added by JS but pre-defined them make your page display faster.

Tab 1 content.

Tab 2 content.

Tab 3 content.

Source

No padding space around tabs element

(Since v.2.4.4)

Add class rd-tabs-no-padding to the tabs element where tabs element may have class rd-tabs by pre-defined or automatic added by the JS.

Tab 1 content.

Tab 2 content.

Tab 3 content.

Source

<div class="tabs rd-tabs-no-padding">
    ...
</div>

Many tabs.

Resize your browser to see how responsive tabs navbar work.

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Tab 8
Tab 9
Tab 10
Tab 11
Tab 12
Tab 13
Tab 14
Tab 15
Tab 16
Tab 17
Tab 18
Tab 19
Tab 20
Tab 21
Tab 22
Tab 23
Tab 24
Tab 25
Tab 26
Tab 27
Tab 28
Tab 29
Tab 30
Tab 31
Tab 32
Tab 33
Tab 34
Tab 35
Tab 36
Tab 37
Tab 38
Tab 39
Tab 40
Tab 41
Tab 42
Tab 43
Tab 44
Tab 45
Tab 46
Tab 47
Tab 48
Tab 49
Tab 50
Tab 51
Tab 52
Tab 53
Tab 54
Tab 55
Tab 56
Tab 57
Tab 58
Tab 59
Tab 60

Many tabs content.

Many Tabs2 Tab 1
Many Tabs2 Tab 2
Many Tabs2 Tab 3
Many Tabs2 Tab 4
Many Tabs2 Tab 5
Many Tabs2 Tab 6
Many Tabs2 Tab 7
Many Tabs2 Tab 8
Many Tabs2 Tab 9
Many Tabs2 Tab 10
Many Tabs2 Tab 11
Many Tabs2 Tab 12
Many Tabs2 Tab 13
Many Tabs2 Tab 14
Many Tabs2 Tab 15
Many Tabs2 Tab 16
Many Tabs2 Tab 17
Many Tabs2 Tab 18
Many Tabs2 Tab 19
Many Tabs2 Tab 20
Many Tabs2 Tab 21
Many Tabs2 Tab 22
Many Tabs2 Tab 23
Many Tabs2 Tab 24
Many Tabs2 Tab 25
Many Tabs2 Tab 26
Many Tabs2 Tab 27
Many Tabs2 Tab 28
Many Tabs2 Tab 29
Many Tabs2 Tab 30
Many Tabs2 Tab 31
Many Tabs2 Tab 32
Many Tabs2 Tab 33
Many Tabs2 Tab 34
Many Tabs2 Tab 35
Many Tabs2 Tab 36
Many Tabs2 Tab 37
Many Tabs2 Tab 38
Many Tabs2 Tab 39
Many Tabs2 Tab 40
Many Tabs2 Tab 41
Many Tabs2 Tab 42
Many Tabs2 Tab 43
Many Tabs2 Tab 44
Many Tabs2 Tab 45
Many Tabs2 Tab 46
Many Tabs2 Tab 47
Many Tabs2 Tab 48
Many Tabs2 Tab 49
Many Tabs2 Tab 50
Many Tabs2 Tab 51
Many Tabs2 Tab 52
Many Tabs2 Tab 53
Many Tabs2 Tab 54
Many Tabs2 Tab 55
Many Tabs2 Tab 56
Many Tabs2 Tab 57
Many Tabs2 Tab 58
Many Tabs2 Tab 59
Many Tabs2 Tab 60

Many tabs (2) content. For checking tabs horizontal scroll individually. (This tabs block scroll will not affect the tabs block above.)

Manual set active tab.

This tab is set as active via JS option activeTabs: 1. The tab number start from 0.

Source

RDTATabs.init('.my-custom-tabs1', {activeTabs: 1});

Remember last tab

To use remember last tab, it is not recommend to use wide selector such as CSS class but recommended to use id only.
Use rememberLastTab option and set it to true to remember last active tab.

Source

RDTATabs.init('#rdta-tabs-rememberlasttab', {rememberLastTab: true});

Ajax

Preloaded
Ajax

Source

Vertical

Add tabs-vertical class to the tabs element to display it in vertical (medium screen or larger).

Source

Please note that you can use data-targettab HTML attribute to specify target tab instead of link to #target-tab-id.

Tabs inside tabs

Tab 1
Tab 2

The content in tab 1.

The content in tab 2.

The inner tab 2-1.

The inner tab 2-2.

Source

Activate tabs using specific id.

RDTATabs.init('#titOuterTabs');

Events

RDTA tabs have few events for hooking.

Event type	Description
rdta.tabs.activeTab	This event is fired when tab was set to active or changed tab.
rdta.tabs.ajaxFailed	This event is fired when XHR failed.
rdta.tabs.ajaxContentLoaded	This event is fired when ajax tab content was loaded.

Use the first example and open console to see detail.

Sidebar menus

Tabs

Examples

Source

Using <ol>

Source

With pre-defined CSS classes.

Source

No padding space around tabs element

Source

Many tabs.

Manual set active tab.

Source

Remember last tab

Source

Ajax

Source

Vertical

Source

Tabs inside tabs

Source

Events

Using `<ol>`