Lightweight jQuery Accordion Plugin with Minimal Markup - Accordion.js
File Size: | 5.7 KB |
---|---|
Views Total: | 4584 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Accordion.js is a simple, lightweight jQuery plugin that turns a set of nested elements into an accordion by passing in the id of a wrapper element.
How to use it:
1. Add references to jQuery JavaScript library and the jQuery accordion.js plugin.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="accordion.js"></script>
2. The html document must be structured in the following way, using unique HTML tags for each section, header and content:
- Container element
- Sub-container element for each item in the according - recommended tag: section
- Header element for each title in the accordion - recommended tag: h1
- Content element for each item in the accordion - recommended tag: p
- Close Sub-container
- Repeat sub-containers as often as required
- Close Container
<div id="accordion"> <section> <h1>Accordion Title 1</h1> <p>Accordion content here</p> </section> <section> <h1>Accordion Title 1</h1> <p>Accordion content here</p> </section> <section> <h1>Accordion Title 3</h1> <p>Accordion content here</p> </section> </div>
3. That's it. Customize the accordion with your own CSS styles.
#accordion { clear: both; float: left; } #accordion section { text-align: left; width: 450px; } #accordion section h1 { font-size: 16px; cursor: pointer; border: 1px #C0392B solid; border-radius: 5px; background-color: #E74C3C; padding: 10px; color: #fff; } #accordion section p { display: none; padding-left: 10px; } .fulljustify { text-align: justify; } .fulljustify:after { content: ""; display: inline-block; width: 100%; } section h1 span { float: right; display: block; position: relative; } section h1 span img { margin-top: 2px; margin-right: 10px; } section h1 span img.open { float: right; position: absolute; clip: rect(0px,15px,7px,0px); right: 0px; margin-top: 9px; } section h1 span img.closed { float: right; position: absolute; clip: rect(8px,15px,15px,0px); right: 0px; margin-top: 2px; }
This awesome jQuery plugin is developed by matt-platts. For more Advanced Usages, please check the demo page or visit the official website.