Skip to content
A jQuery accordion plugin
JavaScript CSS
Branch: master
Clone or download
Arcwise Merge pull request #2 from andralexxx/master
"Uncaught TypeError: $ is not a function" fix
Latest commit b378585 Feb 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Move the code from outside closure. Dec 10, 2018
README.md Update README.md Jun 6, 2017
_config.yml

README.md

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 can’t perform that action at this time.