Toggle

Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page.

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-success" 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 flash pulse rubberband shake tada wobble

Hello World!

<!-- 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'