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

File Size: 11.2 KB
Views Total: 7198
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

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

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

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="//"></script>
<script src="jquery-collapsible-fieldset.js"></script>

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


4. Make the form fieldset collapsed on page load.

  collapsed: true

5. Config the expanding/collapsing animation.

  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.