JQuery Plugin For Collapsible Fieldset

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.

AttachmentSize
Source code and example28.79 KB

Comments

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);

Thanks Mitch, I just updated the script.

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

The zip archive is broken.

Sorry for the unconvenience. The archive has been fixed.

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

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.

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?

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?

im implementing, but we had (anonymous function)

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);

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.

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

<fieldset id="fieldset1" class="coolfieldset expanded">

or

<fieldset id="fieldset2" class="coolfieldset collapsed">

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

not support jQuery 1.9.1, how could adapt?

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

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);

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);

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.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <b> <i> <img> <span>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <drupal6>, <java>, <javascript>, <php>, <python>. The supported tag styles are: <foo>, [foo].
  • 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.