How to make use of it:

1. Include the model sheet ziehharmonika.css within the header that can present the first 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>
  <div>
    <p>More Content 1</p>
  </div>
  <h3>Section Content 2</h3>
  <div>
    <p>More Content 2</p>
  </div>
  <h3>Section Content 3</h3>
  <div>
    <p>More Content 3</p>
  </div>
</div>

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

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="ziehharmonika.js"></script>

4. Initialize the accordion plugin and executed it.

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

5. Default plugin settings.

$('.ziehharmonika').ziehharmonika({

  // 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: '–',
    closed: '+'
  },

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

  // Scroll to opened accordion element
  scroll: true
  
});

Stylish jQuery Accordion / Content Toggle Plugin, Ziehharmonika Github

See Demo And Download