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