# Tabs

TIP

Tabs are used to separate content into different panes where each pane is viewable one at a time.

Based on jQueryUI Tabs (opens new window).

# Settings and API

TIP

Use the .js-tabs class on a tab-container to initialize jQuery UI Tabs.
See here jQueryUI Tabs (opens new window) for API Documentation.

# Tab Bar

    .c-tab-container
    > .c-tabs
    > .c-tabs__item[.-is-active] > .c-tabs__item__link
    > .c-tabs__content

1
2
3
4

Kundendaten
Login-Daten
Account

Tab 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Tab 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Tab 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

hide code

<div class="c-tab-container js-tabs">
    <ul class='c-tabs'>
        <li class='c-tabs__item'><a class='c-tabs__item__link' href="#kundendaten">Kundendaten</a></li>
        <li class='c-tabs__item'><a class='c-tabs__item__link' href="#logindaten">Login-Daten</a></li>
        <li class='c-tabs__item'><a class='c-tabs__item__link' href="#account">Account</a></li>
    </ul>
    <div id="meine-daten" class="meine-daten">
        <div id="kundendaten" class="c-tabs__content">
            <p>Tab 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
                libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
                libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?</p>
        </div>
        <div id="logindaten" class="c-tabs__content">
            <p>Tab 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
                libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
                libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?</p>
        </div>
        <div id="account" class="c-tabs__content">
            <p>Tab 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
                libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
                libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?</p>
        </div>
    </div>
</div>

# Tab Bar with more items

hide code

<ul class="c-tabs">
    <li class="c-tabs__item">
        <a class="c-tabs__item__link" href="">Oh, hello there!</a>
    </li>
    <li class="c-tabs__item">
        <a class="c-tabs__item__link" href="">My Name's Tabby Tab</a>
    </li>
    <li class="c-tabs__item">
        <a class="c-tabs__item__link" href="">I'd rather be an Accordion</a>
    </li>
    <li class="c-tabs__item">
        <a class="c-tabs__item__link" href="">But that's okay</a>
    </li>
    <li class="c-tabs__item">
        <a class="c-tabs__item__link" href="">Wow, look how fancy</a>
    </li>
    <li class="c-tabs__item">
        <a class="c-tabs__item__link" href="">Super duper fancy</a>
    </li>
</ul>

← Search Table →