Stylish jQuery Accordion / Content Toggle Plugin - ziehharmonika

File Size: 5.5 KB
Views Total: 11403
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Stylish jQuery Accordion / Content Toggle Plugin - ziehharmonika

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

How to use it:

1. Include the style sheet ziehharmonika.css in the header that will provide the primary CSS styles for the plugin.

<link href="ziehharmonika.css" rel="stylesheet">

2. Create headers and collapsible contents for the accordion.

<div class="ziehharmonika">
  <h3>Section Content 1</h3>
    <p>More Content 1</p>
  <h3>Section Content 2</h3>
    <p>More Content 2</p>
  <h3>Section Content 3</h3>
    <p>More Content 3</p>

3. Include jQuery library and the JavaScript file ziehharmonika.js at the bottom of the webpage.

<script src="//"></script>
<script src="ziehharmonika.js"></script>

4. Initialize the accordion plugin and done.


5. Default plugin settings.


  // To use a headline tag other than h3, adjust or overwrite ziehharmonika.css as well
  headline: 'h3',

  // Give headlines a certain prefix, e.g. "♫ My headline"
  prefix: false,

  // Only 1 accordion can be open at any given time
  highlander: true,

  // Allow or disallow last open accordion to be closed
  collapsible: false,

  // Arrow down under headline
  arrow: true,

  // Opened/closed icon on the right hand side of the headline (either false or JSON containing symbols or image paths)
  collapseIcons: {
    opened: '&ndash;',
    closed: '+'

  // alignment of collapse icon
  // 'left' or 'right'
  collapseIconsAlign: 'right',

  // Scroll to opened accordion element
  scroll: true




  • Added auto scrolling (Scroll to opened accordion element)


  • New option: collapseIconsAlign

This awesome jQuery plugin is developed by Arcwise. For more Advanced Usages, please check the demo page or visit the official website.