CGU Core implements a slide toggling framework which can be used to control the visibility of content.
Example
<div class="dropdown">
<hr/>
<div class="dropdown__title js-slide-toggle" data-target=".dropdown__content">
<a href="#">Slide Toggle</a>
<span class="dropdown__icon" aria-hidden="true"></span>
</div>
<div class="dropdown__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a turpis dapibus, dignissim dolor sit amet, rutrum eros. Mauris eget lobortis sem. Integer sed blandit sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel rhoncus diam. Morbi a rhoncus erat, quis tempus risus. Etiam vel pretium orci.</p>
</div>
</div>
How to use
Slide toggles utilize a series of classes and attributes:
Required
Class: js-slide-toggle
Declares a node as a control for slide toggling some specified content.
Attribute: data-target
Takes a CSS selector targeting the element that is to be toggled. In general, the slide toggle and the target should be siblings. The exception to this is that a slide toggle can be a child of a sibling to it’s target. A file directory-like syntax can be used to traverse up the DOM tree and find the target data-target="../.my-target".
Example: traverse up the DOM tree one level to find the target
<ul>
<li>
<h4>Use the button to toggle content.</h4>
<br/>
<a href="#" class="button button--small js-slide-toggle" data-target="../.toggled-content">toggle</a>
</li>
<li class="toggled-content u-display-none">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et ipsum lorem. In tempus nisl id consequat dictum. Etiam odio massa, euismod in nunc ac, ultricies sollicitudin nisl. Vestibulum volutpat sit amet lectus nec dapibus. Quisque id fermentum arcu. Curabitur sit amet velit pulvinar, lobortis erat id, tristique ex.</p>
</li>
</ul>
Optional:
Attribute: data-parent
Declares a node as the parent of the the slide-toggle and the target elements. Sometimes it is useful to manually define the parent because an is-open class gets appended to it when the target is visible.