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