Toggle

Hide, switch or change the appearence of different contents through a toggle.

Usage

To apply this component, just add the data-f-toggle="{target: #ID}" attribute to a <button> or <a> element. You can use any selector with the toggle attribute.

The toggle will add or remove a class from the item. By default, it adds the .f-hidden class to hide the element.

Example

What's up?

Example

<button class="f-btn" data-f-toggle="{target:'#my-id'}">...</button>

<div id="my-id">...</div>

Multiple items

You can also toggle multiple items at the same time. Just use the appropriate selector.

Example

Hello!
Bazinga!

NOTE In this example we added the .f-hidden class to one of the items, so that only the other item will be shown. The toggle will switch visible states between both elements.

Markup

<button class="f-btn" data-f-toggle="{target:'.my-class'}">...</button>

<div class="my-class">...</div>
<div class="my-class f-hidden">...</div>

Custom class

If you don't want to toggle the .f-hidden class, you can also add your own custom class.

Example

What's up?

NOTE In this example we used the .f-panel-box-primary class to switch between different panel styles.

Markup

<button class="f-btn" data-f-toggle="{target:'#my-id', cls:'f-panel-box-primary'}">...</button>

<div id="my-id" class="f-panel f-panel-box">...</div>

Animations

The Toggle component allows you to add animations to items when toggling between them. Just add one of the .f-animation-* classes from the Animation component to the animation parameter. The class will be applied to the in as well as the out animation. If you prefer a different out animation, just add another class.

Example

It's magic!

Markup

<button class="f-btn" data-f-toggle="{target:'#my-id', animation:'f-animation-slide-left, f-animation-slide-bottom'}">...</button>

<div id="my-id">...</div>

JavaScript options

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

<button data-f-toggle="{target:'#my-id'}">...
Option Possible value Default Description
target CSS selector false Elements where classes should be toggled
cls string 'f-hidden' Class to toggle
animation mixed false Any f-animation class name.
toggletext string/html Change the HTML on toggle