Loading, please wait...

ARTDESIGN TABS

EXAMPLES

Overwrite settings for all children elements

Tab 1
Tab 2
Tab 3
Content 1
Content 2
Content 3
<div data-plugin-ad-tabs="ad-tabs" data-ad-tabs-options="Blue" data-ad-tabs-buttons-options="FullBlue">
    <div>
        <div data-ad-tabs-status="Open">Tab 1</div>
        <div>Tab 2</div>
        <div>Tab 3</div>
    </div>
    <div>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>

Frequently overwriting settings for all children elements

Tab 1
Tab 2
Tab 3
Content 1
Content 2
Content 3
<div data-plugin-ad-tabs="ad-tabs" data-ad-tabs-options="Blue" data-ad-tabs-buttons-options="FullBlue, InnerShadow">
    <div>
        <div data-ad-tabs-status="Open">Tab 1</div>
        <div>Tab 2</div>
        <div>Tab 3</div>
    </div>
    <div>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>

Overwrite settings for a specific child element

Tab 1
Tab 2
Tab 3
Content 1
Content 2
Content 3
<div data-plugin-ad-tabs="ad-tabs">
    <div>
        <div data-ad-tabs-options="Blue" data-ad-tabs-buttons-options="FullBlue" data-ad-tabs-status="Open">Tab 1</div>
        <div>Tab 2</div>
        <div>Tab 3</div>
    </div>
    <div>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>

Frequently overwriting settings for a specific child element

Tab 1
Tab 2
Tab 3
Content 1
Content 2
Content 3
<div data-plugin-ad-tabs="ad-tabs">
    <div>
        <div data-ad-tabs-options="Blue" data-ad-tabs-buttons-options="FullBlue, InnerShadow" data-ad-tabs-status="Open">Tab 1</div>
        <div>Tab 2</div>
        <div>Tab 3</div>
    </div>
    <div>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>

Hash support

Tab 1
Tab 2
Tab 3
Content 1
Content 2
Content 3
<div data-plugin-ad-tabs="ad-tabs" data-ad-tabs-options="Hash">
    <div>
        <div data-ad-tabs-status="Open" data-ad-tabs-hash="Tab1">Tab 1</div>
        <div data-ad-tabs-hash="Tab2">Tab 2</div>
        <div data-ad-tabs-hash="Tab3">Tab 3</div>
    </div>
    <div>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>