Toggle
‹ BackShow/hide something
<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.
<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.
<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.
<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:
<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
<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
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");