Toggle

Hide, switch or change the appearance 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 can be used to add or remove a class or attribute from the item. By default, it adds the hidden attribute to hide the element.

<button data-uk-toggle="target: #my-id" type="button"></button>
<p id="my-id"></p>
  • What's up?
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div>
    <button
    class="uk-btn uk-btn-default"
    type="button"
    data-uk-toggle="target: #toggle-usage"
    >
    Toggle
    </button>
    <div class="uk-card uk-card-body mt-2" id="toggle-usage">What's up?</div>
    </div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div>
    <button className="uk-btn uk-btn-default" type="button" data-uk-toggle="target: #toggle-usage">
    Toggle
    </button>
    <div className="uk-card uk-card-body mt-2" id="toggle-usage">What's up?</div>
    </div>

Multiple items

You can also toggle multiple items at the same time. Just add the target: SELECTOR option to the data-uk-toggle attribute and use a selector that applies to all items.

<button type="button" data-uk-toggle="target: .my-class"></button>
<p class="my-class"></p>
<p class="my-class"></p>
  • Hello!
  • Something's not working? Feel free to report an issue or edit this snippet .

    <button
    class="uk-btn uk-btn-default"
    type="button"
    data-uk-toggle="target: .toggle"
    >
    Toggle
    </button>
    <div class="toggle uk-card uk-card-body mt-2">Hello!</div>
    <div class="toggle uk-card uk-card-body mt-2" hidden>Bazinga!</div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div>
    <button className="uk-btn uk-btn-default" type="button" data-uk-toggle="target: .toggle">
    Toggle
    </button>
    <div className="toggle uk-card uk-card-body mt-2">Hello!</div>
    <div className="toggle uk-card uk-card-body mt-2" hidden>Bazinga!</div>
    </div>

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

Custom class

If you don’t want to toggle the hidden attribute, you can also toggle a custom class. Just add the cls: CLASS option to the data-uk-toggle attribute. In this example we used the .uk-card-primary class to switch between different card styles.

<button
type="button"
data-uk-toggle="target: #my-id; cls: uk-card-primary"
></button>
<p id="my-id" class="uk-card"></p>
  • Custom class
  • Something's not working? Feel free to report an issue or edit this snippet .

    <button
    class="uk-btn uk-btn-default"
    type="button"
    data-uk-toggle="target: #toggle-custom; cls: uk-card-primary"
    >
    Toggle
    </button>
    <div id="toggle-custom" class="uk-card uk-card-body mt-2">Custom class</div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div>
    <button className="uk-btn uk-btn-default" type="button" data-uk-toggle="target: #toggle-custom; cls: uk-card-primary">
    Toggle
    </button>
    <div id="toggle-custom" className="uk-card uk-card-body mt-2">Custom class</div>
    </div>

Animations

The Toggle component allows you to add animations to items when toggling between them. Just add one of the .uk-anmt-* 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 animation, just add another class.

<button
type="button"
data-uk-toggle="target: #my-id; animation: uk-anmt-fade"
></button>
<p id="my-id"></p>
  • Animation
  • Something's not working? Feel free to report an issue or edit this snippet .

    <button
    href="#toggle-animation"
    class="uk-btn uk-btn-default"
    type="button"
    data-uk-toggle="target: #toggle-animation; animation: uk-anmt-fade"
    >
    Toggle
    </button>
    <div id="toggle-animation" class="uk-card uk-card-body mt-2">Animation</div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div>
    <button href="#toggle-animation" className="uk-btn uk-btn-default" type="button" data-uk-toggle="target: #toggle-animation; animation: uk-anmt-fade">
    Toggle
    </button>
    <div id="toggle-animation" className="uk-card uk-card-body mt-2">Animation</div>
    </div>

Multiple animations

You can also apply multiple animations from the Animation component. That way you can add different in and out animations.

<button
type="button"
data-uk-toggle="target: #my-id; animation: uk-anmt-slide-left, uk-anmt-slide-bottom"
></button>
<p id="my-id"></p>
  • Animation
  • Something's not working? Feel free to report an issue or edit this snippet .

    <button
    class="uk-btn uk-btn-default"
    type="button"
    data-uk-toggle="target: #toggle-animation-multiple; animation: uk-anmt-slide-left, uk-anmt-slide-bottom"
    >
    Toggle
    </button>
    <div id="toggle-animation-multiple" class="uk-card uk-card-body mt-2">
    Animation
    </div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div>
    <button className="uk-btn uk-btn-default" type="button" data-uk-toggle="target: #toggle-animation-multiple; animation: uk-anmt-slide-left, uk-anmt-slide-bottom">
    Toggle
    </button>
    <div id="toggle-animation-multiple" className="uk-card uk-card-body mt-2">
    Animation
    </div>
    </div>

Queued animations

When toggling multiple items with an animation, you might want to wait until the first animation has run through before animating the second item. To do so, just add the queued: true option to the data-uk-toggle attribute.

<button
type="button"
data-uk-toggle="target: .my-class; animation: uk-anmt-fade; queued: true"
></button>
<p class="my-class"></p>
<p class="my-class"></p>
  • Animation

  • Something's not working? Feel free to report an issue or edit this snippet .

    <button
    class="uk-btn uk-btn-default"
    type="button"
    data-uk-toggle="target: .toggle-animation-queued; animation: uk-anmt-fade; queued: true; duration: 300"
    >
    Toggle
    </button>
    <p class="toggle-animation-queued uk-card uk-card-body mt-2">Animation</p>
    <p
    class="toggle-animation-queued uk-card uk-card-body uk-card-primary mt-2"
    hidden
    >
    Animation
    </p>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div>
    <button className="uk-btn uk-btn-default" type="button" data-uk-toggle="target: .toggle-animation-queued; animation: uk-anmt-fade; queued: true; duration: 300">
    Toggle
    </button>
    <p className="toggle-animation-queued uk-card uk-card-body mt-2">Animation</p>
    <p className="toggle-animation-queued uk-card uk-card-body uk-card-primary mt-2" hidden>
    Animation
    </p>
    </div>

Modes

A toggle can be triggered in different ways. Just add the mode option to the data-uk-toggle attribute and apply one of these values.

ValueDescription
hoverThe toggle will be triggered on hover.
click The toggle will be triggered on click. This is the default value.
click, hoverThe toggle will be triggered on click and hover.
mediaThe toggling behavior depends on the viewport width. More information.
<button type="button" data-uk-toggle="target: #my-id; mode: hover"></button>
<p id="my-id"></p>
  • What's up?
  • Something's not working? Feel free to report an issue or edit this snippet .

    <button
    class="uk-btn uk-btn-default"
    type="button"
    data-uk-toggle="target: #toggle-hover; mode: hover"
    >
    Hover
    </button>
    <div class="uk-card uk-card-body mt-2" id="toggle-hover">What's up?</div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div>
    <button className="uk-btn uk-btn-default" type="button" data-uk-toggle="target: #toggle-hover; mode: hover">
    Hover
    </button>
    <div className="uk-card uk-card-body mt-2" id="toggle-hover">What's up?</div>
    </div>

Media

When using the media mode, the media option with one of possible values has to be added as well. For example, add a number in pixels, e.g. 640, or a breakpoint, e.g. @s, @m, @l or @xl. Without the target option, the toggle applies the toggled state to itself. This means it will switch between the different states that are defined in the cls option depending on the viewport width that it is displayed on.

<!-- The primary modifier will only be applied on large screens -->
<div
class="uk-card"
data-uk-toggle="cls: uk-card-primary; mode: media; media: @l"
></div>
  • Primary on large screens
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div
    class="uk-card uk-card-body max-w-sm"
    data-uk-toggle="cls: uk-card-primary; mode: media; media: @l"
    >
    Primary on large screens
    </div>
  • Something's not working? Feel free to report an issue or edit this snippet .

    <div className="uk-card uk-card-body max-w-sm" data-uk-toggle="cls: uk-card-primary; mode: media; media: @l">
    Primary on large screens
    </div>

Note The initial toggle state depends on the cls option. It is either the first given class in the space separated list or if set to false, the hidden attribute. If more than one class is given, the other classes are simply being toggled on state change.

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

OptionValueDefaultDescription
targetStringfalseCSS selector of the element(s) to toggle.
modeStringclickComma-separated list of trigger behaviour modes. (hover, click, media)
clsStringfalseThe class that is being toggled. Defaults to the hidden attribute.
mediaNumber, StringfalseIn media mode, the breakpoint that triggers the toggle - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).
animationStringfalseSpace-separated names of animations. Comma-separated for animation out.
durationNumber200Animation duration in milliseconds.
queuedBooleantrueToggle the targets successively.

target is the Primary option and its key may be omitted, if it’s the only option in the attribute value.

<span data-uk-toggle=".my-class"></span>

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.toggle(element, options);

Events

The following events will be triggered on elements with this component attached:

NameDescription
beforeshowFires before an item is shown. Can prevent showing by calling preventDefault() on the event.
showFires after an item is shown.
shownFires after the item’s show animation has completed.
beforehideFires before an item is hidden. Can prevent hiding by calling preventDefault() on the event.
hideFires after an item’s hide animation has started.
hiddenFires after an item is hidden.

Methods

The following methods are available for the component:

Toggle

UIkit.toggle(element).toggle();

Toggles the Toggle’s target.

Accessibility

The Toggle component automatically sets the appropriate WAI-ARIA roles, states and properties.

  • The toggle element has the button role if an <a> element is used.
  • To implement the Disclosure (Show/Hide) design pattern, manually set an aria-expanded attribute. It will automatically update when toggling.
Customize

Customize your Franken UI experience.