Switcher

Dynamically transition through different content panes.


Usage

The switcher component consists of a number of toggles and their related content items. Add the data-switcher="{connect:'#ID'}" attribute to the element which contains the toggles, targetting the same id as is used on the element containing the content items. Add the .switcher class to the same element. Typically the switcher is combined with other components, some of which will be shown here.

Usage

  • <ul class="subnav subnav-pill" data-switcher="{connect:'#subnav-pill-content-1'}">
        <li class="active"><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
    <ul class="switcher">
        <li class="active">Hello!</li>
        <li>Hello again!</li>
        <li>World!</li>
    </ul>

Switch items from within content

In some cases you want to switch to another content section from within the active content. This is possible using the data-switcher-item attribute. To target the items, you need to set the data attribute to the number of the respective content item.

Usage

  • <div class="row" data-row-margin>
        <div class="col-3-12-medium">
            <ul class="subnav subnav-pill" data-switcher="{connect:'#switch-from-content'}">
                <li class="active"><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
        <div class="col-9-12-medium">
            <ul class="switcher">
                <li class="active">Hello! <a href="#" data-switcher-item="next">Switch to the next content section</a></li>
                <li>Hello again! <a href="#" data-switcher-item="2">Switch to third content section 3</a></li>
                <li>World! <a href="#" data-switcher-item="previous">Switch to the previous content section</a></li>
            </ul>
        </div>
    </div>

Setting the attribute to next and previous will switch to the adjacent items.

Markup

<li> ... <a href="#" data-switcher-item="next">...</a></li>
<li> ... <a href="#" data-switcher-item="previous">...</a></li>

Connect multiple items

It is also possible to connect multiple content containers. Just extend the connect parameter with the ID of the additional container.

Usage

  • Container 1

    • Hello from container 1!
    • Hello again from container 1!
    • Bazinga from container 1!

    Container 2

    • Hello from container 2!
    • Hello again from container 2!
    • Bazinga from container 2!
  • <div class="row" data-row-margin>
        <div class="col-3-12-medium">
            <ul class="nav nav-side" data-switcher="{connect:'#switch-multiple-1, #switch-multiple-2'}">
                <li class="active"><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
        <div class="col-9-12-medium">
            <div class="row row-2-cols-medium" data-margin>
                <div>
                    <h4>Container 1</h4>
                    <ul class="switcher">
                        <li class="active">Hello from container 1!</li>
                        <li>Hello again from container 1!</li>
                        <li>Bazinga from container 1!</li>
                    </ul>
                </div>
                <div>
                    <h4>Container 2</h4>
                    <ul class="switcher">
                        <li class="active">Hello from container 2!</li>
                        <li>Hello again from container 2!</li>
                        <li>Bazinga from container 2!</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

Animations

The Switcher component allows you to add different animations to items when toggling between them. All you need to do is add the animation parameter to the data-attribute and define the animation that you want to apply. Check the table below for an overview of the animations provided.

Class Description
fade The element fades in.
scale The items scale up.
slide-top The items slide in from the top.
slide-bottom The items slide in from the bottom.
slide-left The items slide in from the left.
slide-right The items slide in from the right.
slide-horizontal The items slide horizontally, the direction depending on the adjacency of the item.
slide-vertical The items slide vertically, the direction depending on the adjacency of the item.

Usage

  • Fade
    • Hello!
    • Hello again!
    • World!
    Scale
    • Hello!
    • Hello again!
    • World!
    Slide top
    • Hello!
    • Hello again!
    • World!
    Slide bottom
    • Hello!
    • Hello again!
    • World!
    Slide left
    • Hello!
    • Hello again!
    • World!
    Slide right
    • Hello!
    • Hello again!
    • World!
    Slide horizontal
    • Hello!
    • Hello again!
    • World!
    Slide vertical
    • Hello!
    • Hello again!
    • World!
  • <div class="row row-4-cols-medium margin" data-row-margin>
        <div>
            <h5 class="h4">Fade</h5>
            <ul class="subnav subnav-pill" data-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
                <li class="active"><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
            <ul class="switcher margin">
                <li>Hello!</li>
                <li>Hello again!</li>
                <li>World!</li>
            </ul>
        </div>
        <div>
            <h5 class="h4">Scale</h5>
            <ul class="subnav subnav-pill" data-switcher="{connect:'#switcher-content-a-scale', animation: 'scale'}">
                <li class="active"><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
            <ul class="switcher margin">
                <li>Hello!</li>
                <li>Hello again!</li>
                <li>World!</li>
            </ul>
        </div>
        <div>
            <h5 class="h4">Slide top</h5>
            <ul class="subnav subnav-pill" data-switcher="{connect:'#switcher-content-a-slide-top', animation: 'slide-top'}">
                <li class="active"><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
            <ul class="switcher margin">
                <li>Hello!</li>
                <li>Hello again!</li>
                <li>World!</li>
            </ul>
        </div>
        <div>
            <h5 class="h4">Slide bottom</h5>
            <ul class="subnav subnav-pill" data-switcher="{connect:'#switcher-content-a-slide-bottom', animation: 'slide-bottom'}">
                <li class="active"><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
            <ul class="switcher margin">
                <li>Hello!</li>
                <li>Hello again!</li>
                <li>World!</li>
            </ul>
        </div>
        <div>
            <h5 class="h4">Slide left</h5>
            <ul class="subnav subnav-pill" data-switcher="{connect:'#switcher-content-a-slide-left', animation: 'slide-left'}">
                <li class="active"><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
            <ul class="switcher margin">
                <li>Hello!</li>
                <li>Hello again!</li>
                <li>World!</li>
            </ul>
        </div>
        <div>
            <h5 class="h4">Slide right</h5>
            <ul class="subnav subnav-pill" data-switcher="{connect:'#switcher-content-a-slide-right', animation: 'slide-right'}">
                <li class="active"><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
            <ul class="switcher margin">
                <li>Hello!</li>
                <li>Hello again!</li>
                <li>World!</li>
            </ul>
        </div>
        <div>
            <h5 class="h4">Slide horizontal</h5>
            <ul class="subnav subnav-pill" data-switcher="{connect:'#switcher-content-a-slide-horizontal', animation: 'slide-horizontal'}">
                <li class="active"><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
            <ul class="switcher margin">
                <li>Hello!</li>
                <li>Hello again!</li>
                <li>World!</li>
            </ul>
        </div>
        <div>
            <h5 class="h4">Slide vertical</h5>
            <ul class="subnav subnav-pill" data-switcher="{connect:'#switcher-content-a-slide-vertical', animation: 'slide-vertical'}">
                <li class="active"><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
            <ul class="switcher margin">
                <li>Hello!</li>
                <li>Hello again!</li>
                <li>World!</li>
            </ul>
        </div>
    </div>

Custom animations

You can also apply multiple animations by using the animation-* classes from the Animation component. That way you can even create your own custom class to apply a different transition to the switcher.

Usage

    • Hello!
    • Hello again!
    • World!
  • <ul class="subnav subnav-pill" data-switcher="{connect:'#tab-content-a-anim-custom', animation: 'animation-fade, animation-slide-left'}">
        <li class="active"><a href="#">Tab</a></li>
        <li><a href="#">Tab</a></li>
        <li><a href="#">Tab</a></li>
    </ul>
    <ul class="switcher margin">
        <li>Hello!</li>
        <li>Hello again!</li>
        <li>World!</li>
    </ul>

Switcher with subnav

The switcher is easily applied to the Subnav component.

Usage

  • <ul class="subnav subnav-pill" data-switcher="{connect:'#subnav-pill-content-2'}">
        <li class="active">
            <a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
    <ul class="switcher">
        <li class="active">Hello!</li>
        <li>Hello again!</li>
        <li>World!</li>
    </ul>

Switcher with tabs

As an exception to the rule, add the data-tab="{connect:'#ID'}" attribute, using the parameter "tab" instead of "switcher", to the tabbed navigation to combine the switcher with the Tab component.

Usage

    • Hello!
    • Hello again!
    • World!
    • Hello!
    • Hello again!
    • World!
  • <div class="margin grid" data-row-margin>
        <div class="col-6-12-medium">
            <ul class="tab" data-tab="{connect:'#tab-content'}">
                <li class="active"><a href="#">Tab</a></li>
                <li><a href="#">Tab</a></li>
                <li><a href="#">Tab</a></li>
            </ul>
            <ul class="switcher margin">
                <li class="active">Hello!</li>
                <li>Hello again!</li>
                <li>World!</li>
            </ul>
        </div>
        <div class="col-6-12-medium">
            <ul class="switcher margin">
                <li class="active">Hello!</li>
                <li>Hello again!</li>
                <li>World!</li>
            </ul>
            <ul class="tab tab-bottom" data-tab="{connect:'#tab-bottom-content'}">
                <li class="active"><a href="#">Tab</a></li>
                <li><a href="#">Tab</a></li>
                <li><a href="#">Tab</a></li>
            </ul>
        </div>
    </div>

NOTE When using the tab bottom modifier, navigation and content need to be arranged in reversed order, so that the content appears above the tabs.


Vertical tab

Use the Grid component to display content correctly with a vertical tabbed navigation.

Usage

    • Hello!
    • Hello again!
    • World!
    • Hello!
    • Hello again!
    • World!
  • <div class="row" data-row-margin>
        <div class="col-6-12-medium">
            <div class="row">
                <div class="col-6-12-medium">
                    <ul class="tab tab-left" data-tab="{connect:'#tab-left-content'}">
                        <li class="active"><a href="#">Tab</a></li>
                        <li><a href="#">Tab</a></li>
                        <li><a href="#">Tab</a></li>
                    </ul>
                </div>
                <div class="col-6-12-medium">
                    <ul class="switcher">
                        <li class="active">Hello!</li>
                        <li>Hello again!</li>
                        <li>World!</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-6-12-medium">
            <div class="row" data-row-margin>
                <div class="col-6-12-medium push-6-12">
                    <ul class="tab tab-right" data-tab="{connect:'#tab-right-content'}">
                        <li class="active"><a href="#">Tab</a></li>
                        <li><a href="#">Tab</a></li>
                        <li><a href="#">Tab</a></li>
                    </ul>
                </div>
                <div class="col-6-12-medium pull-6-12">
                    <ul class="switcher">
                        <li class="active">Hello!</li>
                        <li>Hello again!</li>
                        <li>World!</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

Switcher with buttons

The switcher can also be applied to buttons or button groups from the Button component. Just add the switcher data attribute to a <div> element around a group of buttons or to the element with the .button-group class.

Usage

  • Link
    • Hello!
    • Hello again!
    • World!
    Link
    • Hello!
    • Hello again!
    • World!
  • <div class="margin grid" data-row-margin>
        <div class="col-6-12-medium">
            <div data-switcher="{connect:'#button-content'}">
                <a class="button" href="#">Link</a>
                <button class="button">...</button>
                <button class="button">...</button>
            </div>
            <ul class="switcher margin">
                <li class="active">Hello!</li>
                <li>Hello again!</li>
                <li>World!</li>
            </ul>
        </div>
        <div class="col-6-12-medium">
            <div class="button-group" data-switcher="{connect:'#button-group-content'}">
                <a class="button" href="#">Link</a>
                <button class="button">...</button>
                <button class="button">...</button>
            </div>
            <ul class="switcher margin">
                <li class="active">Hello!</li>
                <li>Hello again!</li>
                <li>World!</li>
            </ul>
        </div>
    </div>

Switcher with navs

To apply the switcher to the Nav component, add the data attribute to the nav <ul>. Use the Grid component to arrange nav and content in a grid layout.

Usage

  • <div class="row" data-row-margin>
        <div class="col-3-12-medium">
            <ul class="nav nav-side" data-switcher="{connect:'#nav-content'}">
                <li class="active"><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
        <div class="col-9-12-medium">
            <ul class="switcher">
                <li class="active">Hello!</li>
                <li>Hello again!</li>
                <li>World!</li>
            </ul>
        </div>
    </div>

JavaScript options

This is an example of how to set options via attribute:

data-switcher="{active:1}"
Option Possible value Default Description
connect CSS selector false Related items container
toggle CSS selector '> *' Toggle css selector, triggering content switching on click
active integer 0 Active index on init
animation mixed false Predefined animation name or any animation class name.

Events

You can bind callbacks to following events for custom functionality:

Name Parameter Description
show.clique.switcher event, active item On switcher item show/change

Example

$('[data-switcher]').on('show.clique.switcher', function(event, area){
    console.log("Switcher switched to ", area);
});