Collapsible, jQuery Plugin Overview: ================================================================================ This plugin enables site owners to control multiple collapsible panels by auto opening any defaults specified, and keeping those opened/closed by users as they left them while browsing your site. If you find any errors or have suggested changes, please post a comment on the github project: http://github.com/juven14/Collapsible Very Basic demos can be found here: http://www.snyderplace.com/demos/collapsible.html To enable cookie support you'll need the Cookie plugin here: https://github.com/carhartl/jquery-cookie ________________________________________________________________________________ ================================================================================ Adding a collapsible panel to your html: ================================================================================ You have to create your own html for the collapsible. You need a header element (div or etc) that gets the "collapsible" class assigned and a body element. However, the slide effect will be choppy if you have margins and padding for the container, so here we just use a div. Here I've used "collapsible" but you can choose any other selector. Here is an example: ---HTML code-------------------------------------------------------------------- <div class="collapsible" id="nav-section1">Navigation Section<span></span></div> <div> <ul> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> </ul> </div> <div class="collapsible" id="nav-section2">Navigation Section<span></span></div> <div> <ul> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> </ul> </div> <div class="collapsible" id="nav-section3">Navigation Section<span></span></div> <div> <ul> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> <li><a href="#">Navigation Item</a></li> </ul> </div> ---end HTML code---------------------------------------------------------------- ________________________________________________________________________________ ================================================================================ Adding the Javascript to your file: ================================================================================ JavaScript which belongs in the head of the html document, using the cookie plugin is optional. Please note that our default open / config is only an example as related to the above HTML. ---JavaScript code-------------------------------------------------------------- <script type="text/javascript" src="javascript/jquery.cookie.js"></script> <script type="text/javascript" src="javascript/jquery.collapsible.js"></script> <script type="text/javascript"> $(document).ready(function() { //collapsible management $('.collapsible').collapsible({ defaultOpen: 'nav-section1,nav-section3' }); }); </script> ---end JavaScript code---------------------------------------------------------- The plugin default options are as follows: ---JavaScript code-------------------------------------------------------------- { cssClose: 'collapse-close', cssOpen: 'collapse-open', cookieName: 'collapsible', cookieOptions: { path: '/', expires: 7, domain: '', secure: '' }, defaultOpen: '', speed: 300, bind: 'click', animateOpen: function (elem, opts) { elem.next().slideUp(opts.speed); }, animateClose: function (elem, opts) { elem.next().slideDown(opts.speed); }, loadOpen: function (elem, opts) { elem.next().show(); }, loadClose: function (elem, opts) { elem.next().hide(); } } ---end JavaScript code---------------------------------------------------------- Option details: * cssClose - This is the class you want assigned when it is closed. * cssOpen - This is the class you want assigned when it is opened. * cookieName - This is the name of the cookie that will store which collapsibles should be open. * cookieOptions - See the jquery.cookie plugin for more information. * defaultOpen - This is comma separated list of collapsible header ids. * speed - This is the animation speed for the slide up/down. * bind - This is the event that you want the collapsibles to function on. only 4 are supported: click, dblclick, mouseenter, and mouseover. * animateOpen - This is a custom callback to alter the way that an element is opened. * animateClose - This is a custom callback to alter the way that an element is closed. * loadOpen = This is a custom callback to override the default open state * loadClose = This is a custom callback to override the default close state Methods: You can call following methods on collapsible elements: * collapsed - returns 'true' if element is collapsed * toggle - toggle collapsible state * open - open a collapsible * close - close a collapsible * openAll - open all closed collapsibles * closeAll - close all open collapsibles Call them using jquery-ui style: $(selector).collapsible('method', [arg]); Examples: if ( $('#nav-block').collapsible('collapsed') ) { ... } or appendToLog('Error: service is down!'); $('#nav-logs').collapsible('open'); ________________________________________________________________________________ ================================================================================ Styling ================================================================================ In the above example HTML you will see a span, this is useful if you wish to assign an open/close image. This plugin will append a user defined (or default, see options above) class to header of the collapsible. You can use this to swap out the images or style the different states of your collapsible. ---CSS code--------------------------------------------------------------------- .collapsible div.collapse-open {} .collapsible div.collapse-close {} .collapsible div.collapse-open span {} .collapsible div.collapse-close span {} ---end CSS code----------------------------------------------------------------- ________________________________________________________________________________ ================================================================================