jQuery

【jQuery】軽量のjQueryアコーディオンプラグインZiehharmonika

March 9, 2017
Ziehharmonika

Ziehharmonikaは軽量のjQueryアコーディオンプラグイン。

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

Option Default
highlander true
arrow true
collapsible false
prefix false
headline ‘h3’
collapsibleIcons {opened: ‘–’, closed: ‘+’}

Usage example

$('.ziehharmonika').ziehharmonika({
  highlander: false,
  collapsible: true,
  collapseIcons: {
    opened: '☺',
    closed: '○'
  }
});

Actions

Usage example

$('.ziehharmonika h3:eq(0)').ziehharmonika('open');

MIT