Toggle

‹ Back

Show/hide something

This is the content for example 1 
<button data-toggle-anchor="example-1">Show/hide example 1</button>
<div data-toggle="example-1">
  This is the content for example 1
</div>

Group toggles and allow only one to be toggled at any time

Toggles can be grouped by adding data-toggle-group="group-name" to each of the anchors. Make sure that the value is shared between the anchors.

You can have multiple groups by giving each group a unique toggle-group value.

This is the content for 1
This is the content for 2
This is the content for 3 
<div>
  <button data-toggle-anchor="example-2-1" data-toggle-group="example-2">Heading 1</button>
</div>
<div data-toggle="example-2-1">
  This is the content for 1
</div>
<div>
  <button data-toggle-anchor="example-2-2" data-toggle-group="example-2">Heading 2</button>
</div>
<div data-toggle="example-2-2">
  This is the content for 2
</div>
<div>
  <button data-toggle-anchor="example-2-3" data-toggle-group="example-2">Heading 3</button>
</div>
<div data-toggle="example-2-3">
  This is the content for 3
</div>

Custom Timing

Customise the timing of toggles by adding data-toggle-timing attribute to your anchor.

Internally, the timing assumes a framerate of 60fps, so it will resize the height of the element by (element height / timing) pixels every 16ms. As this method uses requestAnimationFrame for performance, we can't be guaranteed that the animation will run at 60fps. Given that, use this timing as a suggestion rather than an exact timing.

This is the content for 1
This is the content for 2 
<div>
  <button data-toggle-anchor="example-speed-1" data-toggle-timing="100">Heading 1 (100)</button>
</div>
<div data-toggle="example-speed-1">
  This is the content for 1
</div>
<div>
  <button data-toggle-anchor="example-speed-2" data-toggle-timing="2000">Heading 2 (2000)</button>
</div>
<div data-toggle="example-speed-2">
  This is the content for 2
</div>

Change labels between show/hide

Add data-toggle-visible-label to your anchor to swap the label.

This is the hidden content 
<button data-toggle-anchor="example-3-1" data-toggle-visible-label="Hide">Show</button>
<div data-toggle="example-3-1">
  This is the hidden content
</div>

Focus on field after toggling

Add data-toggle-focus to focus on the first available input after toggling.

<button data-toggle-anchor="example-focus" data-toggle-focus>Show</button>
<div data-toggle="example-focus">
  <input type="text" />
</div>

Temporary Toggles

Clicking away will hide the toggle when adding data-toggle-temporary and data-toggle-temporary-anchor attributes:

This will hide when you click away! 
<button data-toggle-anchor="example-temporary" data-toggle-temporary-anchor>Show</button>
<div data-toggle="example-temporary" data-toggle-temporary>
  This will hide when you click away!
</div>

Default Open

You can default a toggle open by adding data-toggle-default

This is open by default! 
<button data-toggle-anchor="example-default" class="active">Show</button>
<div data-toggle="example-default" data-toggle-default>
  This is open by default! 
</div>

Add a bottom toggle which scroll back to the top when hiding

This
is
some
really
really
really
really
really
really
really
really
really
really
really
really
really
long
content
<button data-toggle-anchor="example-4" data-toggle-scroll data-toggle-scroll-master>This is the master toggle anchor</button>
<div data-toggle="example-4">
  This<br />
  is<br />
  some<br />
  really<br />
  really<br />
  really<br />
  really<br />
  really<br />
  really<br />
  really<br />
  really<br />
  really<br />
  really<br />
  really<br />
  really<br />
  really<br />
  long<br />
  content<br />
  <button data-toggle-anchor="example-4" data-toggle-scroll>This is a slave anchor that will scroll to the top</button>
</div>

JS events and triggers

Activate toggle anchor
$(".my-toggle-anchor").trigger("ornament:toggle-on");

Deactivate toggle anchor
$(".my-toggle-anchor").trigger("ornament:toggle-off");

Toggle toggle anchor
$(".my-toggle-anchor").trigger("ornament:toggle");

Hide all toggle content blocks
$(document).trigger("ornament:toggle-all-off");