10 #permalink Tabbox

Source: tabs/css/tabs.css, line 1

10.1 #permalink .tabbox

The widget itself always contains different contents that are separated in tabs. The widget itself contains two areas: The tabbox_head which defines the area that holds any tabs as well as the tabbox_body which contains the contents.

Examples

Default styling

Tab A Tab B Tab C

Contents of Tab A
A
A

Contents of Tab B
B

Contents of Tab C

.tabbox_head--stretch

Makes the tabs grow over full width sharing space equally

Tab A Tab B Tab C

Contents of Tab A
A
A

Contents of Tab B
B

Contents of Tab C

Markup

<div class="tabbox" data-widget="Tabs">
    <div class="tabbox_head {modifiers}">
        <a href="#tab-a" class="tab" data-tabbox-action>Tab A</a>
        <a href="#tab-b" class="tab" data-tabbox-action>Tab B</a>
        <a href="#tab-c" class="tab" data-tabbox-action>Tab C</a>
    </div>
    <div class="tabbox_body">
        <div class="tab_content" id="tab-a" data-tabbox-effect>
            <div class="tab_content_inner">
                Contents of Tab A<br>
                A<br>
                A
            </div>
        </div>
        <div class="tab_content" id="tab-b" data-tabbox-effect>
            <div class="tab_content_inner">
                Contents of Tab B<br>B
            </div>
        </div>
        <div class="tab_content" id="tab-c" data-tabbox-effect>
            <div class="tab_content_inner">
                Contents of Tab C
            </div>
        </div>
    </div>
</div>

Source: tabs/css/tabs.css, line 7