Black Sun Plc: Tab

Tabs

A single content area with multiple panels, each associated with a header in a list.

Example # Basic

tabpanel-first

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.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

tabpanel-second

tabpanel-third

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

HTML

<div class="bs-tablist">
    <ul role="tablist" data-behavior-is="tablist-ul">
        <li>
            <button type="button" id="tab-first" role="tab" aria-controls="tabpanel-first" aria-selected="true" class="selected">
            First tab
            </button>
        </li>
        <li>
            <button type="button" id="tab-second" role="tab" aria-controls="tabpanel-second" aria-selected="false">
            Second tab
            </button>
        </li>
        <li>
            <button type="button" id="tab-third" role="tab" aria-controls="tabpanel-third" aria-selected="false">
            Third tab
            </button>
        </li>
    </ul>
    <section id="tabpanel-first" role="tabpanel" aria-labelledby="tab-first" class="selected">
        <h3>tabpanel-first</h3>
        <p>Proin elit arcu, rutrum commodo, vehicula tempus...</p>
    </section>
    <section id="tabpanel-second" role="tabpanel" aria-labelledby="tab-second">
        <h3>tabpanel-second</h3>
        <p>Proin elit arcu, rutrum commodo, vehicula tempus...</p>
    </section>
    <section id="tabpanel-third" role="tabpanel" aria-labelledby="tab-third">
        <h3>tabpanel-third</h3>
        <p>Proin elit arcu, rutrum commodo, vehicula tempus...</p>
    </section>
</div>

Example # with hash

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

Need to add data attribute data-type="hash".

<ul role="tablist" data-behavior-is="tablist-ul" data-type="hash">

In this implementation we are also checking hash of the page url and page will scroll to element id match with hash.