jQuery Plugin To Create Accordion-Style Animated Fieldset - Coolfieldset

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

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">

3. Style the collapsible fieldset whatever you want.

.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.


5. Default settings.


// true =  collapsed at start
collapsed: false, 

// enable smooth animation
animation: true, 

// animation speed
// fast, medium and slow
speed: 'medium'


Change log:



  • Improved accessibility with WAI-ARIA as commited in fork by macgamper.


  • 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.