Toggle

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


Usage

To apply this component, just add the data-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 .hidden class to hide the element.

Usage

  • Data Attributes

    Attribute Description
    [data-toggle] This is the identifier for the JavaScript to initialize the toggle.
  • This will show & hide
  • <button class="button" data-toggle="{target:'#target'}">...</button>
    <div id="target">...</div>

Multiple items

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

Usage

  • Item 1
  • <button class="button" data-toggle="{target:'.target'}">...</button>
    <div class="target">...</div>
    <div class="target hidden">...</div>

Custom class

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

Usage

  • Item 1
  • <button class="button" data-toggle="{target:'#target'}">...</button>
    <div id="target" class="panel panel-box">...</div>

JavaScript options

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

data-toggle="{target:'#my-id'}"
Option Possible value Default Description
target CSS selector false Elements where classes should be toggled
class string 'hidden' Class to toggle
animation mixed false Any animation class name.

Events

Name Parameter Description
toggle.clique event, data After toggle completed