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> |
Page 1 of 11