August 17, 2022

JQuery Accordion / Content Toggle Plugin | Ziehharmonika

ziehharmonika is a lightweight but customizable jQuery plugin that helps you create elegant and responsive accordion/content toggle interfaces with ease.

multi level accordion jquery, jquery accordion expand all, jquery collapse toggle, best jquery accordion, nested accordion jquery, jquery all plugin, accordion openclose jquery

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: '&ndash;',
    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

Official Website(Arcfool): Click Here

This superior jQuery/javascript plugin is developed by Arcfool. For extra Advanced Usages, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.