Required files
SCSS files required: _components.toggles.scss
JS files required: toggle-element.js
Toggle structure
The element to be toggled requires the data attribute data-js-module="toggleElement" which fires the creates a new instance of the JavaScript Toggle Element and an ID to target.
The trigger/button to show and hide the element can be open, close or toggle by applying the following data attributes and including the ID as the value:
data-toggle-el, data-open-el, data-close-el.
The javascript toggles the class .is-active on the element, so the CSS can do the work of hiding and showing in various ways. Some are defined in the UI Toolkit, however you can also define your own.
Toggle
To create a basic toggle, the class .toggle can be applied to the element.
Note: all this does is toggles display none/block.
Donec quis luctus odio. Aenean nunc diam, tincidunt in est nec, tincidunt imperdiet lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id nisi urna. Integer maximus dui eu ullamcorper scelerisque. Nunc augue sem, tempor in fringilla non, volutpat et nulla. Vivamus volutpat nisi metus. Nulla sed justo non urna eleifend semper at quis felis.
Toggle fade
To create a fade effect, the class .toggle-fade can be applied to the element.
Donec quis luctus odio. Aenean nunc diam, tincidunt in est nec, tincidunt imperdiet lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id nisi urna. Integer maximus dui eu ullamcorper scelerisque. Nunc augue sem, tempor in fringilla non, volutpat et nulla. Vivamus volutpat nisi metus. Nulla sed justo non urna eleifend semper at quis felis.
Toggle slide
To create a slide down effect, the class .toggle-slide can be applied to the element.
The CSS uses a max height to create the slide mechanism, therefore there are modifying classes available which use varying max heights: .toggle-slide--sm, .toggle-slide--md, .toggle-slide--lg.
Donec quis luctus odio. Aenean nunc diam, tincidunt in est nec, tincidunt imperdiet lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id nisi urna. Integer maximus dui eu ullamcorper scelerisque. Nunc augue sem, tempor in fringilla non, volutpat et nulla. Vivamus volutpat nisi metus. Nulla sed justo non urna eleifend semper at quis felis.
Toggle dismissible
To dismiss a toggle upon click to anywhere else within the page, the class .toggle-dismissible can be applied to the element.
We will automatically close it if the user clicks somewhere else than than any of the open or close controls within the document.
Donec quis luctus odio. Aenean nunc diam, tincidunt in est nec, tincidunt imperdiet lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id nisi urna. Integer maximus dui eu ullamcorper scelerisque. Nunc augue sem, tempor in fringilla non, volutpat et nulla. Vivamus volutpat nisi metus. Nulla sed justo non urna eleifend semper at quis felis.