JS Toggle

Toggle Slide

Shows or hide element specified on href

Click to slide Toggle

Hello World!

	                <a href="#toggle-slide" data-fc-modules="toggle" class="button">Click to slide Toggle</a>

<div id="toggle-slide" class="box-invert">
    <p>Hello World!</p>
</div>
                

Toggle Class

Toggle class name to href element

Click to toggle Class

Hello World!

	                <a href="#toggle-class" data-fc-modules="toggle" data-fc-class="bg-ok" class="button">Click to toggle Class</a>

<div id="toggle-class" class="box-invert">
    <p>Hello World!</p>
</div>

                

Toggle Animation

Toggle animation to href element based on animate.css

	                <!-- Bounce -->
<a href="#toggle-animation-attention" data-fc-modules="toggle" data-fc-animation="bounce" class="button">bounce</a>

<!-- flash -->
<a href="#toggle-animation-attention" data-fc-modules="toggle" data-fc-animation="flash" class="button">flash</a>

<!-- pulse -->
<a href="#toggle-animation-attention" data-fc-modules="toggle" data-fc-animation="pulse" class="button">pulse</a>

<!-- rubberband -->
<a href="#toggle-animation-attention" data-fc-modules="toggle" data-fc-animation="rubberband" class="button">rubberband</a>

<!-- shake -->
<a href="#toggle-animation-attention" data-fc-modules="toggle" data-fc-animation="shake" class="button">shake</a>

<!-- tada -->
<a href="#toggle-animation-attention" data-fc-modules="toggle" data-fc-animation="tada" class="button">tada</a>

<!-- wobble -->
<a href="#toggle-animation-attention" data-fc-modules="toggle" data-fc-animation="wobble" class="button">wobble</a>


<!-- Target element -->
<div class="pa-l ta-c">
    <p class="fz-h1" id="toggle-animation-attention">Hello World!</p>
</div>


                

Attributes

href

The href of the link will be an anchor to the menu.

data-fc-class

Sets the classname to toggle.

data-fc-animation

Sets the animation type to the target element. Possible values (with -in, -out, -up, -down, -right or -left): 'flash', 'bounce', 'shake', 'tada', 'pulse', 'rubberband', 'fade', 'swing', 'tada', 'wobble', 'flip', 'rotate', 'slide', 'hinge', 'roll'