jCollapser plugin to support multiple collapse elements on one page.
There was an inquiry about how to have multiple collapsing elements on one page with unique IDs.
jCollapser now has support for this. In order to get this working a small restructuring of the plugin code had to be done.
It now looks like this:
/**
* Small plugin to make toggling the visibility of certain parts of a page
* easier.
*
* @package jCollapser
* @author Peter Halasz <skinner@gmail.com>
* @license http://www.gnu.org/licenses/gpl-3.0.txt GPL v3.0
* @copyright (c) 2008, Peter Halasz all rights reserved.
*/
(function($) {
/**
* Sets up the functionality.
*
* @access public
* @return void
*/
$.fn.jcollapser = function(options) {
var $this = $(this)[0];
var settings = $.extend({}, $.fn.jcollapser.defaults, options);
if(typeof(options.container) == 'undefined') {
settings.container = "#" + $this.id;
}
$.fn.jcollapser.settings[$this.id] = settings;
$(settings.container + " > .collapse").bind("click", {}, $.fn.jcollapser.collapse);
$(settings.container + " > .expand").bind("click", {}, $.fn.jcollapser.expand);
};
/**
* Collapse a set of elements and set a cookie so we can remember
* the state.
*
* @access public
* @return void
*/
$.fn.jcollapser.collapse = function() {
var settings = $(this).parents().get(0).id;
settings = $(this).jcollapser.settings[settings];
$( settings.container + ' > .collapse').css("display","none");
$( settings.container + ' > .expand').css("display","block");
$(settings.target).slideUp("slow");
$.cookie('collapser_' + settings.target, 'collapsed', { path: '/', expires: 365 });
}
/**
* Expand a set of elements and set a cookie so we can remember
* the state.
*
* @access public
* @return void
*/
$.fn.jcollapser.expand = function() {
var settings = $(this).parents().get(0).id;
settings = $(this).jcollapser.settings[settings];
$(settings.container + ' > .expand').css("display","none");
$(settings.container + ' > .collapse').css("display","block");
$(settings.target).slideDown("slow");
$.cookie('collapser_' + settings.target, 'expanded', { path: '/', expires: 365 });
}
$.fn.jcollapser.settings = {};
$.fn.jcollapser.defaults = {
container: '#example',
target: '#data'
};
})(jQuery);
Now it is much easier to initialize and add the collapse/expand functionality to elements.
Just add
$("#example1").jcollapser({target: '#jcollapse1'});
And the element with ID jcollapse1 in example1 will have collapse/expand functionality.
Let’s see how an example page with 2 collapsing elements would look like.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jCollapser Demo page</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jcollapser.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
$(function() {
$("#example1").jcollapser({target: '#jcollapse1'});
$("#example2").jcollapser({target: '#jcollapse2'});
});
</script>
<style type="text/css">
.collapse {
background: transparent url('./collapse.gif') no-repeat scroll 0% 0%;
height: 11px;
position: relative;
width: 11px;
}
.expand {
background:transparent url('./expand.gif') no-repeat scroll 0% 0%;
display:none;
height:11px;
position:relative;
width:11px;
}
</style>
</head>
<body>
<div>
<fieldset id="example1">
<div class="collapse" ></div>
<div class="expand" ></div>
<div id="jcollapse1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu ante, pellentesque quis, rhoncus et, molestie in, lacus. Phasellus id purus id enim malesuada dictum. Maecenas tellus magna, tristique at, ultrices mollis, rhoncus id, sapien. Sed volutpat est ut magna. Nulla facilisi. Curabitur lacus diam, semper vitae, convallis sodales, adipiscing convallis, leo. Nulla dictum dignissim ligula. In posuere. In eleifend elit eget sapien. Suspendisse eget eros eget pede facilisis aliquam. Etiam rhoncus. Nullam quis tellus eget orci placerat aliquet.
<div>
</fieldset>
</div>
<div>
<fieldset id="example2">
<div class="collapse" ></div>
<div class="expand" ></div>
<div id="jcollapse2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu ante, pellentesque quis, rhoncus et, molestie in, lacus. Phasellus id purus id enim malesuada dictum. Maecenas tellus magna, tristique at, ultrices mollis, rhoncus id, sapien. Sed volutpat est ut magna. Nulla facilisi. Curabitur lacus diam, semper vitae, convallis sodales, adipiscing convallis, leo. Nulla dictum dignissim ligula. In posuere. In eleifend elit eget sapien. Suspendisse eget eros eget pede facilisis aliquam. Etiam rhoncus. Nullam quis tellus eget orci placerat aliquet.
<div>
</fieldset>
</div>
</body>
</html>
jQuery 1.3.2 or later is needed. Get jQuery at http://docs.jquery.com/Downloading_jQuery#Download_jQuery
jQuery’s Cookie plugin is also needed to save the state between sessions. The plugin can be found here
The complete code is here
That’s it. If you need any help or have something that could improve this, then feel free to leave a comment here :)
Advertisement
Categories: JavaScript, jQuery
JavaScript, jQuery
I have two questions, but this is great. It starts out as expanded and I think I want to be able to set that to collapsed OR be able to define it somehow per call.
2nd, it only works when I have the expand/collapse are in div’s. Will not work in say span.
I am learning jquery, but just not that far along yet.
I worked out the first issue, just css problems. The 2nd one is now my focus.
Ugh, scratch that, wasn’t even reading what I wrote. The first issue is the problem. I want them all to start collapsed. http://www.clanthemes.com
Sorry, the first issue is the main focus. I want them all to start contracted OR be able to define that per item.
I meant I solved the 2nd issue.
I sorta worked out problem one. I believe it may just be a css issue that needs to be worked out.
You can see on http://www.clanthemes.com what happens if you click the 2nd item.
I’ll add an option to it so it can be defined at initialization wether it will be expanded or collapsed.
Oh and I forgot to include the cookie reading code in the initialization part.. :(
I’ll add that as soon as I get back home.
You also should put up a paypal donation widget. I would like to make one for your hard work.
Let me know when these updates are complete please sir. Really a great script and the above features will just be outrageous.
Okay the new version is up more about it can be found here: http://skinn3r.wordpress.com/2009/03/09/jcollapser-v12jcollapser-v12/
The zip archive can be found here: http://progadv.googlecode.com/files/jCollapser-1.2.zip
Very nice, thanks.