🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

ziehharmonika is a lightweight yet customizable jQuery plugin that helps you create responsive, stylish accordion / content toggle interfaces with ease.

content-toggle

Documentation

Ziehharmonika

A lightweight jQuery accordion plugin. Demo

Include

<!-- Don't forget to include jQuery --> <link rel="stylesheet" href="ziehharmonika.css"> <script src="ziehharmonika.js"></script>

Structure

<div class="ziehharmonika">   <h3><!-- Your headline --></h3>   <div>     <!-- Your content -->   </div>    <h3><!-- Your headline --></h3>   <div>     <!-- Your content -->   </div> </div>

Initialize

$('.ziehharmonika').ziehharmonika();

Options

Options:

Option Type Default Description
highlander boolean true Only 1 accordion can be open at any given time.
arrow boolean true Arrow down below the headline.
collapsible boolean false Allow or disallow last open accordion to be closed.
prefix string or false false Give headlines a certain prefix, e.g. "♫ My headline".
headline string 'h3' Use a headline tag other than h3. In that case, ddjust or overwrite ziehharmonika.css as well.
collapseIcons json or false {opened: '–', closed: '+'} Opened/closed icon on the right hand side of the headline. HTML will be parsed so images can be used as icons as well.
collapsibleIconsAlign 'left', 'right' 'right' Align the collapse icon on either side.
scroll boolean true Scrolls to opened accordion element

Usage example:

$('.ziehharmonika').ziehharmonika({   highlander: false,   collapsible: true,   collapseIcons: {     opened: '☺',     closed: '○'   } });

Actions

Action Parameters Description
open boolean: scroll (optional) Opens a specific accordion, taking your options into account, and scrolls to it. Returns the affected element(s).
close N/A Closes a specific accordion, taking your options into account. Returns the affected element(s) even if the action fails.

The actions 'closeAll', 'forceClose', and 'forceCloseAll' are too wonky to be listed here. Use with caution.

Usage example:

$('.ziehharmonika h3:eq(0)').ziehharmonika('open', false);

License

MIT


You May Also Like