Sliders

Slider functionality allows the user to apply accordion like behaviour to large groups of content. The slider is similar to the accordion menu however it's implementation allows for a more open approach to the types of content to display whereas the accordion menu can only be applied to unordered lists of content.

Basic Example

This will trigger the slide

This is the slide content

Another slider

This is the slide content

Code example

<h3 class="zen-slide-trigger zen-padding"><span class="zen-icon zen-icon-angle-down zen-right"></span>This will trigger the slide</h3>
<div class="zen-slide-content border">This is the slide content</div>
<h3 class="zen-slide-trigger zen-padding"><span class="zen-icon zen-icon-angle-down zen-right"></span>Another slider</h3> <div class="zen-slide-content border">This is the slide content</div>

Block Example

Using the primary and secondary colours for the slide trigger and the slide content.

This will trigger the slide

This is the slide content

Code example

<h3 class="zen-slide-trigger block primary"><span class="zen-icon zen-icon-angle-down zen-right"></span>This will trigger the slide</h3>
<div class="zen-slide-content block secondary">This is the slide content</div>