# 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

What's up?

### 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

Hello!
Bazinga!

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

What's up?

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

It's magic!

### 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'}"

Option | Possible value | Default | Description
--- | --- | --- | ---
`target` | CSS selector | false | Elements where classes should be toggled
`cls` | string | 'uk-hidden' | Class to toggle
`animation` | mixed | false | Any uk-animation class name.