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-module="Switcher" attribute to the element which contains the toggles. By default, it will assume that the next sibling element is the target for the toggles.

By default, the switcher works by linking the indexes of the toggle items and target items. So you need to make sure both are in the same order.

Typically the switcher is combined with other components, some of which will be shown here.

<div class="c-menu c-menu--attached" data-module="Switcher">
  <a href="#" class="c-menu__item c-menu__link">Section #1</a></li>
  <a href="#" class="c-menu__item c-menu__link">Section #2</a></li>
  <a href="#" class="c-menu__item c-menu__link">Section #3</a></li>
</div>

<div>
  <section class="c-panel c-panel--box">
    <h3>Section 1</h3>
    ...
  </section>
  <section class="c-panel c-panel--box">
    <h3>Section 2</h3>
    ...
  </section>
  <section class="c-panel c-panel--box">
    <h3>Section 3</h3>
    ...
  </section>
</div>

Options

Target

If you are not sure that the target items will come directly after the toggler items or you just want to be sure (probably best), you can specifically the target using data-options='{"target" : "#switcher-content1"}.

<div class="c-menu c-menu--attached" data-module="Switcher" data-options='{"target":"#switcher-content1"}>
  <a href="#" class="c-menu__item c-menu__link">Section #1</a></li>
  <a href="#" class="c-menu__item c-menu__link">Section #2</a></li>
  <a href="#" class="c-menu__item c-menu__link">Section #3</a></li>
</div>

<hr>

<div id="switcher-content1">
  <section class="c-panel c-panel--box">
    <h3>Section 1</h3>
    ...
  </section>
  <section class="c-panel c-panel--box">
    <h3>Section 2</h3>
    ...
  </section>
  <section class="c-panel c-panel--box">
    <h3>Section 3</h3>
    ...
  </section>
</div>

Multiple targets

You can also switch multiple targets by passing in an array data-options='{"target" : ["#switcher-content2" , "#switcher-content3"]}.

Hide

You can toggle the hidden property on the target panes by setting data-option='{"hide":true}'. This results in 'Tab' like functionality.

ARIA Accessibility

When this method is activated, the module also add relevant ARIA rules to enhance accessibility. (Ref: 24 ways: How tabs should work)

Active index

You set which pane is initially active by setting data-options='{"activeIndex":1}', which results in the second tab being initially active (zero based index).

Hash

You can set the switcher to use url hashes by setting data-options='{"hash":true}'.

Using url hashes means you can link to a page a set and certain tab to be open. It also means that tab changes are in the browser history.

Note If you are using the hash setting you can not switch multiple targets.