Ramin Hossaini

jQuery.collapsible plugin

Apr
27

Note: This plug-in is no longer being maintained and is provided as is.

Introduction

I wrote my first jQuery plugin today and figured other people might find it useful too.

The plugin adds expand/collapse functionality to divs and also saves the state using the jQuery cookie plugin

Changelog

  • 15 Jun 2010
    • You can now specify that a module’s default state is collapsed by adding ‘collapsed’ to the class. For more information, look at the example given below.
  • 04 May 2010
    • Changed expand/collapse icons to sprite
    • Can now have multiple groups of collapsible boxes by giving each
      a descriptive identifier
  • 27 Apr 2010
    • First release

Demo

Click here for a demo

Download

Download Latest Version (jquery.collapsible.latest.zip)

Setup

Add includes to the head-section:

1
2
3
4
<script type='text/javascript' src="./js/jquery-1.4.2.min.js"></script>
<script type='text/javascript' src="./js/jquery.cookie.js"></script>
<script type='text/javascript' src="./js/jquery.collapsible.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./css/demo.css" />

Add the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="module"> <!-- only important for styling -->
	<div class="header"> <!-- must have a class name -->
		<h1>Header #1</h1>
	</div>
	<div class="content"> <!-- the 'content' class is only for styling -->
		<p>Content comes here</p>
	</div>
</div>
 
<div class="module">
	<div class="header collapsed"> <!-- this will be collapsed by default (unless the cookie says otherwise) -->
		<h1>Header #2</h1>
	</div>
	<div class="content">
		<p>Content comes here</p>
	</div>
</div>
 
<div class="module">
	<div class="header">
		<h1>Header #3</h1>
	</div>
	<div class="content">
		<p>Content comes here</p>
	</div>
</div>

Initialize the Javascript:

1
2
3
4
5
<script type='text/javascript'>
$(document).ready(function() {
	$.collapsible(".module .header");
});
</script>

17 Responses to jQuery.collapsible plugin

  1. Pingback: jQuery.collapsible plugin | Ramin Hossaini (blog) | Source code bank

  2. Hi,
    How we set collapsible panel closed for first time?

    • Hi Okn –

      Thanks for the suggestion! I’ve just updated the plugin to include this functionality.

      Download the new source code, and add the class “collapsed” along side the “header” class (look at the example above).

      Note: if you specify “collapsed” as the default and the cookie for the user says the module should be expanded, the cookie will have higher priority.

      Try it out and let me know if something doesn’t work as it should.

  3. Hi – great code
    I’ve added it to my site but stripped it down to using just one dropdown for a contact form.
    How would i get it working so that when my contact form is submitted a ‘thanks for your enquiry’ message displays for a few seconds and then the panel closes again?
    I know this is a bit specific, but it would look ace on my site.
    I understand your code uses cookies to remember the last state, but i’d like to have it in the ‘closed’ state whenever the page is refreshed.
    Thanks again for your excellent code.
    Andy

  4. Great script! I love it. Thanks!

    I just had a little problem when Header was on two line, the collapse box was placed on the bottom and not on the top. To avoid this, a quick edit of the jquery.collapsible.js file is needed.

    Find:.append(“”)
    Replace with:.prepend(“”)
    (two times)

  5. Oh found another small problem: when header has a link in it, it doesn’t work. It just makes expand or collapse the box.

  6. It seems to correct it, the “return false” in query.collapsible.js file must be delete.

  7. Ok it’s working… but clicking on the URL also makes the box collapse/expand. To prevent this behaviour, the best solution would be to exclude the URL zone… Any idea?

  8. Pingback: Gnomo.org 2004 – 2011 » Riflessioni per Giovannicondueenne.

  9. Thanks for sharing this awesome piece of work. I’m curious how to add an expand all/collapse all button to close or open all modules on the page. Do you have any hints, or even better, answers?

    Thanks again for sharing your work.

  10. I have gotten the script to work on my site. I have it set to collapse by default. The problem I am having is after I expand the section I cannot get it to collapse again without refreshing the screen. Any suggestions?

  11. Thankyou for providing this solution. Did you manage to get the code working successfully on a vbhtml page? I get a ‘resource cannot be found error’ when I do this.

  12. And if you try to execute it in a html file, the colapsible panels do not appear. Thanks in advance

  13. I want only the first panel to be collapsed initially when the page loads..how do we do that?

  14. David Lindhagan

    Excellent! Brilliant!
    I could use it right-away šŸ™‚
    Thanks!

  15. I have some checkboxes inside header . I want header to be expanded when checkbox is clicked. How can i do it ???
    thanx in advance

  16. Hi
    JQUERY is new for me… I am using your Plugin to collapse and expand my divs. Every div contains some form fields. If there’s an error – a field wasn’t filled or wasn’t filled correctly – the fields color changes to red.
    My problem: if a div is collapsed and within this div I have required fields, the required input isn’t visible…
    So – how can I open all divs (selector is a class)?

    Thanks Urs