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-f-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 .f-switcher class to the same element. Typically the switcher is combined with other components, some of which will be shown here.

Example

Markup

<!-- This is the container of the toggling elements -->
<ul data-f-switcher="{connect:'#my-id'}">
	<li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="f-switcher">
	<li>...</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-f-switcher-item attribute. To target the items, you need to set the data attribute to the number of the respective content item.

Example

Markup

<!-- This is the nav containing the toggling elements -->
<ul data-f-switcher="{connect:'#my-id'}">
	<li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="f-switcher">
	<li> ... <a href="" data-f-switcher-item="0">...</a></li>
	<li> ... <a href="" data-f-switcher-item="1">...</a></li>
</ul>

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

Markup

<li> ... <a href="" data-f-switcher-item="next">...</a></li>
<li> ... <a href="" data-f-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.

Example

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!

Markup

<!-- This is the nav containing the toggling elements -->
<ul data-f-switcher="{connect:'#my-id-one, #my-id-two'}">
	<li><a href="">...</a></li>
</ul>

<!-- These are the containers of the content items -->
<ul id="my-id-one" class="f-switcher">
	<li>...</li>
</ul>

<ul id="my-id-two" class="f-switcher">
	<li>...</li>
</ul>

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.

Example

Fade
  • Hello!
  • Hello again!
  • Bazinga!
Scale
  • Hello!
  • Hello again!
  • Bazinga!
Slide top
  • Hello!
  • Hello again!
  • Bazinga!
Slide bottom
  • Hello!
  • Hello again!
  • Bazinga!
Slide left
  • Hello!
  • Hello again!
  • Bazinga!
Slide right
  • Hello!
  • Hello again!
  • Bazinga!
Slide horizontal
  • Hello!
  • Hello again!
  • Bazinga!
Slide vertical
  • Hello!
  • Hello again!
  • Bazinga!

Markup

<!-- This is the container of the toggling elements -->
<ul data-f-switcher="{connect:'#my-id', animation: 'fade'}">
	<li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="f-switcher">
	<li>...</li>
</ul>

Custom animations

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

Example

  • Hello!
  • Hello again!
  • Bazinga!

Markup

<!-- This is the container of the toggling elements -->
<ul data-f-switcher="{connect:'#my-id', animation: 'f-animation-fade, f-animation-slide-left'}">
	<li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="f-switcher">
	<li>...</li>
</ul>

Switcher with subnav

The switcher is easily applied to the Subnav component.

Example

Markup

<!-- This is the subnav containing the toggling elements -->
<ul class="f-subnav f-subnav-pill" data-f-switcher="{connect:'#my-id'}">
	<li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="f-switcher">
	<li>...</li>
</ul>

Switcher with tabs

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

Example

  • Hello!
  • Hello again!
  • Bazinga!
  • Hello!
  • Hello again!
  • Bazinga!

Markup

<!-- This is the tabbed navigation containing the toggling elements -->
<ul class="f-tab" data-f-tab="{connect:'#my-id'}">
	<li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="f-switcher f-margin">
	<li>...</li>
</ul>

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.

Example

  • Hello!
  • Hello again!
  • Bazinga!
  • Hello!
  • Hello again!
  • Bazinga!

Example

<!-- This is the left vertical tabbed navigation -->
<div class="f-grid">
	<div class="f-width-medium-1-2">
		<!-- This is the vertical tabbed navigation containing the toggling elements -->
		<ul class="f-tab f-tab-left" data-f-tab="{connect:'#my-id'}">...</ul>
	</div>
	<div class="f-width-medium-1-2">
		<!-- This is the container of the content items -->
		<ul id="my-id" class="f-switcher">...</ul>
	</div>
</div>

<!-- This is the right vertical tabbed navigation -->
<div class="f-grid">
	<div class="f-width-medium-1-2 f-push-1-2">
		<!-- This is the vertical tabbed navigation containing the toggling elements -->
		<ul class="f-tab f-tab-right" data-f-tab="{connect:'#my-id'}">...</ul>
	</div>
	<div class="f-width-medium-1-2 f-pull-1-2">
		<!-- This is the container of the content items -->
		<ul id="my-id" class="f-switcher">...</ul>
	</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.

Example

Link
  • Hello!
  • Hello again!
  • Bazinga!
Link
  • Hello!
  • Hello again!
  • Bazinga!

Markup

<!-- This is the container of the toggling buttons -->
<div data-f-switcher="{connect:'#my-id'}">
	<button class="f-btn" type="button">...</button>
</div>

<!-- This is the container of the content items -->
<ul id="my-id" class="f-switcher f-margin">...</ul>

<!-- This is the button group containing the toggling buttons -->
<div class="f-btn-group" data-f-switcher="{connect:'#my-id'}">
	<button class="f-btn" type="button">...</button>
</div>

<!-- This is the container of the content items -->
<ul id="my-id" class="f-switcher f-margin">...</ul>

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.

Example

Markup

<div class="f-grid">
	<div class="f-width-medium-1-4">

		<!-- This is the nav containing the toggling elements -->
		<ul class="f-nav f-nav-side" data-f-switcher="{connect:'#my-id'}">
			<li><a href="">...</a></li>
		</ul>
	</div>
	<div class="f-width-medium-3-4">

		<!-- This is the container of the content items -->
		<ul id="my-id" class="f-switcher">
			<li>...</li>
		</ul>
	</div>
</div>

JavaScript options

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

<ul data-f-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 f-animation class name.
swiping boolean true Enable/disable content change on swipe

Events

You can bind callbacks to following events for custom functionality:

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

Example

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