Toggle
Toggles should be used display show/hide comment. For example, showing/hiding a additional information on the search results page.
You can set the default as either active or inactive by specifying the class on the span to be either toggleActive or toggleInactive,
and setting (or not setting) the class hideVisually on the container that you are toggling.
Here's how you kick this off:
More Options
Yo, I got some content to show you. Lorem ipsum occaecat eiusmod Ut et sit sint quis qui labore in exercitation
esse. Lorem ipsum in aliquip esse anim aliquip ullamco sit dolor in deserunt eu labore. Lorem ipsum magna
officia in laborum fugiat proident cupidatat in ex aliquip velit officia nulla aliquip ut. Lorem ipsum
nostrud ad Ut nulla velit qui esse tempor Excepteur consectetur pariatur enim.
<a href="#toggleArrow1" class="toggle toggleArrow " data-toggle-text="Fewer Options">More Options</a>
<div id="toggleArrow1" class="hideVisually">Yo, I got some content to show you. Lorem ipsum occaecat eiusmod Ut et sit sint quis qui labore in exercitation
esse. Lorem ipsum in aliquip esse anim aliquip ullamco sit dolor in deserunt eu labore. Lorem ipsum magna
officia in laborum fugiat proident cupidatat in ex aliquip velit officia nulla aliquip ut. Lorem ipsum
nostrud ad Ut nulla velit qui esse tempor Excepteur consectetur pariatur enim.
</div>
$(document).ready(function () {
$('.toggle').truliaToggle();
});
Below are some methods you can also call on the toggle component and events you can listen to:
| method | description |
|---|---|
toggle |
Toggle the tooltip. Optional boolean argument to force active. Example: $('.toggle').truliaToggle('toggle', true) |
| events | |
toggle |
Listen to this event to perform an action when the toggle has changed state $('.toggle').on('toggle', function (e, active) { if (active) console.log('I\m Active!') }) |