Accordion Style jQuery Plugin To Expand and Collapse Elements
File Size: | 8.2 KB |
---|---|
Views Total: | 4269 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.