Would you like to be notified for every new articles? Please click HERE to subscribe for newsletter.

JQuery Plugin For Collapsible Fieldset

  • Posted on: 2 April 2011
  • By: admin

If you need to create collapsible and expandable fieldset, this jQuery plugin might be helpful. This plugin can collapsed or hide fieldset and it's content by clicking it's legend. You can also decide the initial state for your fieldset wheter it's expanded or collapsed. The separated CSS file will also useful if you need to modify the fieldset appearance. By the way, I named this plugin coolfieldset.

Using Coolfieldset

Just like the other jQuery plugin, this plugin is also easy to use. Just include jQuery and this plugins inside the <head> tag.

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.coolfieldset.js"></script>

And include the CSS file for styling the fieldset.

<link rel="stylesheet" type="text/css" href="css/jquery.coolfieldset.css" />

Prepare your fieldset.

<fieldset id="fieldset1" class="coolfieldset">
  <legend>Legend</legend>
  <div>
    <p>Fieldset content goes here.</p>
  </div>
</fieldset>

And finally, use this script to turn your fieldsets into collapsible.

<script language="javascript" type="text/javascript">
  $('#fieldset1').coolfieldset();
</script>
Example

The more complete example be seen here.

Download

The source code can be freely downloaded from GitHub: https://github.com/w3shaman/jquery-coolfieldset/releases. Please feel free to contact me if you want to make any contribution for this small project.

Installation Using npm or bower

You can download then extract the script manually or install it using npm or bower command.

Using npm:

npm i jquery-coolfieldset

Using bower:

bower install jquery-coolfieldset

 

Tags: 
javascript
jquery
jquery plugin
fieldset

Comments

Anonymous (not verified)

Thu, 04/21/2011 - 12:44

A fix:

/**
* jQuery Plugin for creating collapsible fieldset
* @requires jQuery 1.2 or later
*
* Copyright (c) 2010 Lucky
* Licensed under the GPL license:
* http://www.gnu.org/licenses/gpl.html
*
* Modified by M. Kuppinger (Doc Pneumo)
*/

(function($) {
function hideFieldsetContent(obj, options){
if(options.animation==true)
obj.find('ol').slideUp(options.speed);
else
obj.find('ol').hide();

obj.removeClass("expanded");
obj.addClass("collapsed");
}

function showFieldsetContent(obj, options){
if(options.animation==true)
obj.find('ol').slideDown(options.speed);
else
obj.find('ol').show();

obj.removeClass("collapsed");
obj.addClass("expanded");
}

$.fn.coolfieldset = function(options){
var settings={collapsed:false,animation:true,speed:'medium'};
$.extend(settings, options);

this.each(function(){
var fieldset=$(this);
var legend=fieldset.children('legend');

if(settings.collapsed==true){
legend.toggle(
function(){
showFieldsetContent(fieldset, settings);
},
function(){
hideFieldsetContent(fieldset, settings);
}
)

hideFieldsetContent(fieldset, {animation:false});
}
else{
legend.toggle(
function(){
hideFieldsetContent(fieldset, settings);
},
function(){
showFieldsetContent(fieldset, settings);
}
)
}
});
}
})(jQuery);

admin

Sat, 04/30/2011 - 10:05

Thanks Mitch, I just updated the script.

Anonymous (not verified)

Thu, 06/16/2011 - 06:38

Unfortunatly, the archive seems broken:

I downloaded 3 times to verify:

gzip: stdin: unexpected end of file
tar: Unexpected EOF in archive
tar: Error is not recoverable: exiting now

Anonymous (not verified)

Thu, 06/16/2011 - 22:50

The zip archive is broken.

admin

Fri, 06/17/2011 - 10:08

Sorry for the unconvenience. The archive has been fixed.

Anonymous (not verified)

Tue, 07/12/2011 - 13:55

Hey,

I am using the jquery UI plugin here: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ and when I expand the collapsed fieldset, I see this: http://i.imgur.com/He76a.png

Would you know how to fix this? THanks

Alan Tang (not verified)

Sun, 03/18/2012 - 17:47

I got few fieldset, I want if user click on 1 button, then all fieldset collapsed, if a fieldset is already collapsed, remain no change, I tried use call click, but if a fieldset is already collapsed, if will change to expand.

Thanks a lot.

Gabriel S (not verified)

Thu, 04/05/2012 - 10:45

im implementing this awesome code in a large form (so the user can expand colaps the different important parts.

for some reason if the fieldset begins collapsed, i cant input anything into the form, why is this?

Gabriel S (not verified)

Thu, 04/05/2012 - 10:50

im implementing this awesome code in a large form (so the user can expand colaps the different important parts.

for some reason if the fieldset begins collapsed, i cant input anything into the form, why is this?

Jorge (not verified)

Thu, 10/18/2012 - 23:24

im implementing, but we had (anonymous function)

Jason (not verified)

Wed, 03/13/2013 - 20:35

Changes made to support functionally with Jquery 1.9.1 as toggle is Deprecated

(function($) {
function hideFieldsetContent(obj, options){
if(options.animation==true)
obj.find('div').slideUp(options.speed);
else
obj.find('div').hide();

obj.removeClass("expanded");
obj.addClass("collapsed");
}

function showFieldsetContent(obj, options){
if(options.animation==true)
obj.find('div').slideDown(options.speed);
else
obj.find('div').show();

obj.removeClass("collapsed");
obj.addClass("expanded");
}

function doToggle(fieldset, setting) {
if (fieldset.hasClass('collapsed')) {
showFieldsetContent(fieldset, setting);
}
else if (fieldset.hasClass('expanded')) {
hideFieldsetContent(fieldset, setting);
}
}

$.fn.coolfieldset = function(options){
var setting={collapsed:false, animation:true, speed:'medium'};
$.extend(setting, options);

this.each(function(){
var fieldset=$(this);
var legend=fieldset.children('legend');

if(setting.collapsed==true){

hideFieldsetContent(fieldset, {animation:false});
}

legend.bind("click", function () { doToggle(fieldset, setting) });

});
}
})(jQuery);

Mat (not verified)

Tue, 08/27/2013 - 23:59

After upgrading to 1.19 found "interesting" feature where legend would disappear and not be accessible using original code.

The code above does not work at all, but the DoToggle method is called. I don't have time to debug - looking for alternative plugin.

Mat (not verified)

Wed, 08/28/2013 - 00:06

found could reproduce functionality by adding "expended" to class ie:

or

the later being the class for those fieldsets set to be collapsed. This then works - the class should be added automatically imho.

ederrafo (not verified)

Sun, 03/24/2013 - 15:20

not support jQuery 1.9.1, how could adapt?

Troy (not verified)

Sat, 05/11/2013 - 01:35

Are you willing to release this under a dual license GPL/MIT and not just GPL?

SiZiOUS (not verified)

Fri, 01/17/2014 - 17:21

The fix implemented by Jason was missing one little thing, I fixed his script for support newer jQuery (tester under jQuery 1.9.1, should work with 1.10 releases too). Enjoy this nice plugin.

/**
* jQuery Plugin for creating collapsible fieldset
* @requires jQuery 1.2 or later
*
* Copyright (c) 2010 Lucky
* Licensed under the GPL license:
* http://www.gnu.org/licenses/gpl.html
*
* "animation" and "speed" options are added by Mitch Kuppinger
*
* Fixed by Jason on Wed, 03/13/2013 - 08:35 PM
* Fixed by SiZiOUS (@sizious) on Fri, 17/01/2014 - 10:18 AM
*/
(function ($) {
function hideFieldsetContent(obj, options) {
if (options.animation == true)
obj.find('div').slideUp(options.speed);
else
obj.find('div').hide();

obj.removeClass("expanded");
obj.addClass("collapsed");
}

function showFieldsetContent(obj, options) {
if (options.animation == true)
obj.find('div').slideDown(options.speed);
else
obj.find('div').show();

obj.removeClass("collapsed");
obj.addClass("expanded");
}

function doToggle(fieldset, setting) {
if (fieldset.hasClass('collapsed')) {
showFieldsetContent(fieldset, setting);
}
else if (fieldset.hasClass('expanded')) {
hideFieldsetContent(fieldset, setting);
}
}

$.fn.coolfieldset = function (options) {
var setting = { collapsed: false, animation: true, speed: 'medium' };
$.extend(setting, options);

this.each(function () {
var fieldset = $(this);
var legend = fieldset.children('legend');

if (setting.collapsed == true) {
hideFieldsetContent(fieldset, { animation: false });
} else {
fieldset.addClass("expanded");
}

legend.bind("click", function () { doToggle(fieldset, setting) });

});
}
})(jQuery);

SiZiOUS (not verified)

Fri, 01/17/2014 - 18:02

Here is a new improved version, see the comments in the header to learn the changes. Enjoy !

/**
* jquery.coolfieldset v0.5
*
* jQuery Plugin for creating collapsible fieldset
* @requires jQuery 1.2 or later
*
* Copyright (c) 2010 Lucky
* Licensed under the GPL license:
* http://www.gnu.org/licenses/gpl.html
*
* "animation" and "speed" options are added by Mitch Kuppinger
*
* Fixed by Jason on Wed, 03/13/2013 - 08:35 PM
* - Support for jQuery 1.9.1
*
* Fixed by SiZiOUS (@sizious) on Fri, 01/17/2014 - 10:18 AM
* - Little fix for supporting jQuery 1.9.1, based on Jason's version
*
* Updated by SiZiOUS (@sizious) on Fri, 01/17/2014 - 10:55 AM
* - Added jQuery chaining support
* - Added an "update" event triggered on element after the operation finishes
* - Works under IE8+, Chrome 32+, Firefox 26+, Opera 18+, Safari 5+
*/
;(function ($, window, undefined) {
function hideFieldsetContent(obj, options) {
if (options.animation) {
obj.find('div').slideUp(options.speed, function() {
obj.trigger("update");
});
} else {
obj.find('div').hide();
}
obj.removeClass("expanded").addClass("collapsed");
if (!options.animation) {
obj.trigger("update");
}
}

function showFieldsetContent(obj, options) {
if (options.animation) {
obj.find('div').slideDown(options.speed, function() {
obj.trigger("update");
});
} else {
obj.find('div').show();
}
obj.removeClass("collapsed").addClass("expanded");
if (!options.animation) {
obj.trigger("update");
}
}

function doToggle(fieldset, setting) {
if (fieldset.hasClass('collapsed')) {
showFieldsetContent(fieldset, setting);
}
else if (fieldset.hasClass('expanded')) {
hideFieldsetContent(fieldset, setting);
}
}

$.fn.coolfieldset = function (options) {
var setting = { collapsed: false, animation: true, speed: 'medium' };
$.extend(setting, options);

return this.each(function () {
var fieldset = $(this);
var legend = fieldset.children('legend');

if (setting.collapsed) {
hideFieldsetContent(fieldset, { animation: false });
} else {
fieldset.addClass("expanded");
}

legend.bind("click", function () { doToggle(fieldset, setting) });

return fieldset;
});
}
})(jQuery, window);

frv (not verified)

Thu, 03/20/2014 - 05:51

Hi Lucky,
Would you mind if I maintain a git repository of coolfieldset ( https://github.com/cybfr/jquery-coolfieldset ), in order to proper package it for debian ? As it's a dependency for fusionforge, we need to have it packaged.

Thank's for your great job.

gxzjne (not verified)

Fri, 08/22/2014 - 19:40

I had a recent crash of my program while working with the same platform that you discuss here and thank you for the information and share about JQuery Plugin For Collapsible Fieldset. Impressive codes and ready to use sequence of instructions is a good tool.
http://www.outlookemailsetup.com

Add new comment

More information about text formats

Limited HTML

  • Allowed HTML tags: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.