Switcher

Ready Added in 2.0.0

Dynamically transition through different content panes.

Usage

The Switcher component consists of a number of toggles and their related content items. Add the gls-switcher attribute to a list element which contains the toggles. Add the .gls-switcher class to the element containing the content items.

By default, the element with the .gls-switcher class has to succeed the toggle directly in order for the switcher to function. If you need it to be nested in another element, for example when using a grid, add the connect: SELECTOR option to the gls-switcher attribute and select the element containing the items for switching.

Typically, the switcher toggles are styled through other components, some of which will be shown here.

<!-- This is the nav containing the toggling elements -->
<ul gls-switcher>
    <li><a href="#"></a></li>
</ul>

<!-- This is the container of the content items -->
<ul class="gls-switcher">
    <li></li>
</ul>

In this example we are using the Subnav component.

    • Hello!
    • Hello again!
    • Bazinga!
  • <ul class="gls-subnav gls-subnav-pill" gls-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="gls-switcher gls-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

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

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

<ul class="gls-switcher gls-margin">
    <li><a href="#" gls-switcher-item="0"></a></li>
    <li><a href="#" gls-switcher-item="1"></a></li>
    <li><a href="#" gls-switcher-item="next"></a></li>
    <li><a href="#" gls-switcher-item="previous"></a></li>
</ul>

  • <ul class="gls-subnav gls-subnav-pill" gls-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>
<ul class="gls-switcher gls-margin">
    <li>Hello! <a href="#" gls-switcher-item="2">Switch to item 3</a></li>
    <li>Hello again! <a href="#" gls-switcher-item="next">Next item</a></li>
    <li>Bazinga! <a href="#" gls-switcher-item="previous">Previous item</a></li>
</ul>

Connect multiple containers

It is also possible to connect multiple content containers. Just add the connect parameter to the gls-switcher attribute and use a selector that applies to all items.

<!-- This is the nav containing the toggling elements -->
<ul gls-switcher="connect: .my-class">...</ul>

<!-- These are the containers of the content items -->
<ul class="gls-switcher my-class">...</ul>

<ul class="gls-switcher my-class">...</ul>

  • Container 1

    • Hello!
    • Hello again!
    • Bazinga!

    Container 2

    • Hello! The first item.
    • Hello again! The second item.
    • Bazinga! The third item.
  • <ul class="gls-subnav gls-subnav-pill" gls-switcher="connect: .switcher-container">
    <li><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<h4>Container 1</h4>

<ul class="gls-switcher switcher-container gls-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

<h4>Container 2</h4>

<ul class="gls-switcher switcher-container gls-margin">
    <li>Hello! The first item.</li>
    <li>Hello again! The second item.</li>
    <li>Bazinga! The third item.</li>
</ul>

Animations

You can apply all animations from the Animation component to switcher items. To do so, add the animation parameter with the relevant class to the gls-switcher attribute.

<ul gls-switcher="animation: gls-animation-fade">...</ul>
    • Hello!
    • Hello again!
    • Bazinga!
  • <ul class="gls-subnav gls-subnav-pill" gls-switcher="animation: gls-animation-fade">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="gls-switcher gls-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

Multiple animations

You can also apply multiple animations from the Animation component. That way you can add different in and out animations.

<ul gls-switcher="animation: gls-animation-slide-left-medium, gls-animation-slide-right-medium">...</ul>
    • Hello!
    • Hello again!
    • Bazinga!
  • <ul class="gls-subnav gls-subnav-pill" gls-switcher="animation: gls-animation-slide-left-medium, gls-animation-slide-right-medium">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="gls-switcher gls-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

Switcher and subnav

The switcher is easily applied to the Subnav component.

<!-- This is the subnav containing the toggling elements -->
<ul class="gls-subnav gls-subnav-pill" gls-switcher>...</ul>

<!-- This is the container of the content items -->
<ul class="gls-switcher"></ul>
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
  • <ul class="gls-subnav gls-subnav-pill" gls-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="gls-switcher gls-margin">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
</ul>

Switcher and tab

As an exception to the rule, add the gls-tab attribute instead of gls-switcher to the tabbed navigation to combine the switcher with the Tab component.

<!-- This is the subnav containing the toggling elements -->
<ul gls-tab>...</ul>

<!-- This is the container of the content items -->
<ul class="gls-switcher">...</ul>
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
  • <ul gls-tab>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="gls-switcher gls-margin">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
</ul>

Vertical tabs

Use the Grid and Width components to display content correctly with a vertical tabbed navigation.

<div gls-grid>
    <div class="gls-width-auto">
        <ul class="gls-tab-left" gls-tab="connect: #my-id">...</ul>
    </div>
    <div class="gls-width-expand">
        <ul id="my-id" class="gls-switcher">...</ul>
    </div>
</div>
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
  • <div class="gls-child-width-1-2@s" gls-grid>
    <div>
        <div gls-grid>
            <div class="gls-width-auto@m">
                <ul class="gls-tab-left" gls-tab="connect: #component-tab-left; animation: gls-animation-fade">
                    <li><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
            <div class="gls-width-expand@m">
                <ul id="component-tab-left" class="gls-switcher">
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
                    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
                </ul>
            </div>
        </div>
    </div>
    <div>
        <div gls-grid>
            <div class="gls-width-auto@m gls-flex-last@m">
                <ul class="gls-tab-right" gls-tab="connect: #component-tab-right; animation: gls-animation-fade">
                    <li><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
            <div class="gls-width-expand@m">
                <ul id="component-tab-right" class="gls-switcher">
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
                    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Switcher and button

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

<!-- This is a switcher using a number of buttons -->
<div gls-switcher="toggle: > *">
    <button class="gls-button gls-button-default" type="button"></button>
    <button class="gls-button gls-button-default" type="button"></button>
</div>

<ul class="gls-switcher">...</ul>
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
  • <div gls-switcher="animation: gls-animation-fade; toggle: > *">
    <button class="gls-button gls-button-default" type="button">Item</button>
    <button class="gls-button gls-button-default" type="button">Item</button>
    <button class="gls-button gls-button-default" type="button">Item</button>
</div>

<ul class="gls-switcher gls-margin">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
</ul>

Note Since this example does not wrap the buttons into list items the clickable elements which trigger the content switching has to be changed by using the toggle option.

Switcher and nav

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

<div gls-grid>
    <div class="gls-width-small">
        <ul class="gls-nav gls-nav-default" gls-switcher="connect: #my-id">...</ul>
    </div>
    <div class="gls-width-expand">
        <ul id="my-id" class="gls-switcher">...</ul>
    </div>
</div>
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
  • <div gls-grid>
    <div class="gls-width-small@m">

        <ul class="gls-nav gls-nav-default" gls-switcher="connect: #component-nav; animation: gls-animation-fade">
            <li><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
    <div class="gls-width-expand@m">

        <ul id="component-nav" class="gls-switcher">
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
            <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
        </ul>

    </div>
</div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option Value Default Description
connect CSS selector ~.gls-switcher Related items container. By default succeeding elements with class ‘gls-switcher’.
toggle CSS selector > * > :first-child Select the clickable elements which trigger content switching.
itemNav CSS selector false Related nav container. By default, nav items are found in related items container only.
active Number 0 Active index on init. Providing a negative number indicates a position starting from the end of the set.
animation String false The space separated names of animations to use. Comma separate for animation out.
duration Number 200 The animation duration.
swiping Boolean true Use swiping.

connect is the Primary option and its key may be omitted, if it’s the only option in the attribute value.

<span gls-switcher=".switcher-container"></span>

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.switcher(element, options);

Events

The following events will be triggered on the connected items of the elements with this component attached:

Name Description
beforeshow Fires before an item is shown. Can prevent showing by calling preventDefault() on the event.
show Fires after an item is shown.
shown Fires after the item’s show animation has completed.
beforehide Fires before an item is hidden. Can prevent hiding by calling preventDefault() on the event.
hide Fires after an item’s hide animation has started.
hidden Fires after an item is hidden.

Methods

The following methods are available for the component:

Show

Gloss.switcher(element).show(index);

Shows the Switcher item with given index.

Name Type Default Description
index String, Number, Node 0 Switcher item to show. 0 based index.