Toggle

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

Usage

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

Example

Toggle

Example

<button class="uk-button" data-uk-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

Toggle

NOTE In this example we added the .uk-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="uk-button" data-uk-toggle="{target:'.my-class'}">...</button>

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

Custom class

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

Example

Toggle

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

Markup

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

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

Animations

The Toggle component allows you to add animations to items when toggling between them. Just add one of the .uk-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

Toggle

Markup

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

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

JavaScript options

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

data-uk-toggle="{target:'#my-id'}"