27Apr/102
jQuery.collapsible plugin
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> |
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.