Toggles

Toggles are simple, non-animated elements designed to show or hide their content upon user interaction.

• Toggle component
• Responsive toggle component
• Usage
  • Via data attributes
  • Via javascript
  • Javascript methods
  • Javascript events

Toggle component

A toggle at its simplest form is a container with a toggle class that includes the toggle trigger button that is defined by applyng the class btn-toggle in a button, and the toggleable content of the component contained in a toggle-content.

Applying a class toggle-open alongside the toggle shows the content of the toggle element, which is hidden by default. The triggering action button toggles between the two states depending on the status of the toggle element - it shows the content of the toggle element when it is hidden, or hides it when it it is already visible.

Code output

HTML Markup

Copy<div class="toggle">
  <button class="btn-toggle" data-toggle="toggle">Toggle trigger button</button>
  <div class="toggle-content">
    <div class="spacer-sm"></div>
    <p>Toggle component content</p>
  </div>
</div>

Responsive toggle component

Responsive toggle components have been developed so that their functionality is only available at specific screen resolution tiers, while being constantly visible at all other resolutions.

The responsive toggle component classes are defined as toggle-{affix}-responsive where affix is one of the 6 responsive tier affixes xxs, xs, sm, md, lg, xl.

In the sample below, the toggleable component has the classes toggle-xxs-responsive toggle-xs-responsive applied, which enable toggle functionality only at the two smallest screen resolution tiers while being constantly visible at all other resolutions.

Applying a class toggle-open alongside the responsive component initially shows the content of the toggle element on the specified resolution tiers instead of it being hidden by default.

Code output

HTML Markup

Copy<div class="toggle toggle-xxs-responsive toggle-xs-responsive">
  <button class="btn-toggle" data-toggle="toggle">Toggle trigger button</button>
  <div class="toggle-content">
    <div class="spacer-sm"><div>
    <p>This toggle component content is constantly visible at all screen resolution tiers except resolutions below 767px where the toggle component functionality is enabled.</p>
  </div>
</div>

Usage

Toggle functionality can be enabled and controlled using HTML data attributes or Javascript.

Via data attributes

Toggle functionality can be enabled by adding a data-toggle="toggle" attribute on the btn-toggle button of a toggle component.

HTML Markup

Copy<div class="toggle">
  <button class="btn-toggle" data-toggle="toggle">Toggle trigger button</button>
  <div class="toggle-content">
    <div class="spacer-sm"></div>
    <p>Toggle component content</p>
  </div>
</div>

Via Javascript

Toggle components that hold a unique id can be called using Javascript.

Copy$('#id').toggle()

Javascript methods

The following methods are available for toggle components that hold a unique id.

Copy$('#id').toggle('toggle')

Copy$('#id').toggle('show')

Copy$('#id').toggle('hide')

Javascript events

The toggle component exposes events at specific triggering points to extend component functionality. Each event instance fires as soon as the pre-specified hooks are reached within the Javascript code. The following events are available for the toggle component and are linked directly to the toggle element and not the control triggering elements, like the buttons triggering the toggle element.

Copy$('#id').on('shown.sky.toggle', function(e) {
  // Extend function
});

Copy$('#id').on('hidden.sky.toggle', function(e) {
  // Extend function
});