jQuery Plugin To Create Accordion-Style Animated Fieldset - Coolfieldset
File Size: | 15.1 KB |
---|---|
Views Total: | 5493 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Coolfieldset is a jQuery plugin designed to create an Accordion-style collapsible / expandable fieldset
with smooth toggle animations.
How to use it:
1. Download and load the jQuery coolfieldset plugin after jQuery library.
<script src="jquery.min.js"></script> <script src="js/jquery.coolfieldset.js"></script>
2. Create group related elements using Html fieldset
, legend
tags. Note that all content inside your fieldset
(except the legend
tag) should be placed inside the div tag.
<fieldset id="demo" class="coolfieldset"> <legend>Headling</legend> <div> <p>Content</p> </div> </fieldset>
3. Style the collapsible fieldset
whatever you want.
.coolfieldset, .coolfieldset.expanded { border: 1px solid #E95546; } .coolfieldset.collapsed { border: 0; border-top: 1px solid #E95546; } .coolfieldset legend { padding-left: 13px; font-weight: bold; cursor: pointer; color: #E95546; } .coolfieldset legend, .coolfieldset.expanded legend { background: transparent url(../images/expanded.gif) no-repeat center left; } .coolfieldset.collapsed legend { background: transparent url(../images/collapsed.gif) no-repeat center left; }
4. Call the function on the fieldset
tag.
$('#demo').coolfieldset();
5. Default settings.
$('#demo').coolfieldset({ // true = collapsed at start collapsed: false, // enable smooth animation animation: true, // animation speed // fast, medium and slow speed: 'medium' });
Change log:
2017-08-27
- JS update
2017-02-11
- Improved accessibility with WAI-ARIA as commited in fork by macgamper.
2015-09-17
- Hide all first-level child items inside fieldset except legend element.
This awesome jQuery plugin is developed by w3shaman. For more Advanced Usages, please check the demo page or visit the official website.