Skip to content

juven14/Collapsible

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
----------------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-----------------------------------------------------------------

________________________________________________________________________________
================================================================================

About

No longer maintaining - Manage multiple collapsibles with cookie support

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •