Accordion Style jQuery Plugin To Expand and Collapse Elements

Expandy Thing is a jQuery plugin used to create accordion-style collapsing and expanding animations for block-level elements. By default, the plugin allows you to have multiple accordions open at the same time. To expand only one piece of content at a time, set the accordion option to true during initialization. The plugin will auto generate a "show all" link inside the first trigger element, which allows you toggle all the hidden elements by one click.

Basic Usage:

1. Load the expandy.css for basic accordion styles.

<link href="css/expandy.css" rel="stylesheet">

2. Load the expandy.min.js script after you have jQuery library included.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/expandy.min.js"></script>

3. Create the Html.

<div class="demo">

  <h2>Headling 1</h2>
  <p>Content 1</p>
  
  <h2>Headling 2</h2>
  <p>Content 2</p>
  
  <h2>Headling 3</h2>
  <p>Content 3</p>
  
</div>

4. Initialize the plugin and done.

$('.demo').makeExpander();

5. Available options and defaults.

$('.demo').makeExpander({

// headling & trigger element
toggleElement: 'h2',

// Use jQuery animations
jqAnim: false,

// show the first piece of content when page loads.
showFirst: false,

// if set to true, only one piece of content can be expanded at a time
accordion: false,

// animation speed
speed: 'medium',

// 'plusminus' or 'arrow'
indicator: 'plusminus'

});

---

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