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