Skip to content
No longer maintaining - Manage multiple collapsibles with cookie support
JavaScript
Find file
Latest commit 8f40f8c May 28, 2015 @juven14 Notice for readme
No longer maintaining this project, contact me if you are interested.
Failed to load latest commit information.
LICENSE added license name to license Apr 12, 2010
README Notice for readme May 28, 2015
jquery.collapsible.js updated version 1.2.1 Aug 1, 2013

README

----------------No longer being Maintained--------------------

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-----------------------------------------------------------------

________________________________________________________________________________
================================================================================
Something went wrong with that request. Please try again.