Create Collapsible Form Fieldsets Using jQuery - collapsible-fieldset.js

A very tiny jQuery plugin for creating Collapsible Form Fieldsets where the users are able to expand/collapse a group of related form fields by clicking on the legend element when needed.

See also:

• jQuery Plugin To Create Accordion-Style Animated Fieldset - Coolfieldset

How to use it:

1. Use the <fieldset> element to group related fields in your html form.

<form>
  <fieldset class="collapsible">
    <legend>Click me</legend>
    <div>
      <input type="text">
      ... More Form Fields Here ...
    </div>
  </fieldset>
</form>

2. Insert the Collapsible Fieldset's JavaScript and CSS files along with the latest jQuery library into the webpage.

<link href="jquery-collapsible-fieldset.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-collapsible-fieldset.js"></script>

3. Just call the main function collapsible() on the form element and done.

$("fieldset.collapsible").collapsible();

4. Make the form fieldset collapsed on page load.

$("fieldset.collapsible").collapsible({
  collapsed: true
});

5. Config the expanding/collapsing animation.

$("fieldset.collapsible").collapsible({
  animation: true, 
  speed: "medium"
});

---

This awesome jQuery plugin is developed by mirzabusatlic. For more Advanced Usages, please check the demo page or visit the official website.