27Apr/10
jQuery.collapsible plugin
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> |
No related posts.
June 15th, 2010 - 14:56
Hi,
How we set collapsible panel closed for first time?
June 15th, 2010 - 15:57
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.
November 25th, 2010 - 20:49
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
February 1st, 2011 - 19:07
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)
February 1st, 2011 - 19:40
Oh found another small problem: when header has a link in it, it doesn’t work. It just makes expand or collapse the box.
February 1st, 2011 - 20:51
It seems to correct it, the “return false” in query.collapsible.js file must be delete.
February 1st, 2011 - 20:59
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?
January 24th, 2012 - 16:49
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.