A lightweight plugin for enabling expandable/collapsible content.
- Packaged with cookie support (yum yum!)
- Lightweight (655 bytes minified and gzipped)
- ARIA compliant
Enjoy!
HTML:
<div id="demo">
<h3>Fruits</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
<h3>Info</h3>
<div>
<p>You can use any container you like (in this case a div)</p>
</div>
</div>
JavaScript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.collapse.js"></script>
<script src="jquery.cookie.js"></script> <!-- If you want cookie support -->
<script>
$(function() {
$("#demo").collapse();
});
</script>
Note: If you're using the plugin on different pages on the same domain, you'll have to have a unique cookie name for each instance to avoid conflict. Use the "cookie" option to set a unique cookie name.
- show (function) : Custom function for showing content (default: function(){ this.show() })
- hide (function) : Custom function for hiding content (default: function(){ this.hide() })
- head (string) : Elements for clickable headings (default: "h3")
- group (string): Elements containing the collapsable content (default: "ul, div")
- cookieName (string) : Name of cookie used in the plugin. (default: "collapse")
Probably works in most modern browsers, but only tested in: Safari, Chrome, IE6+, Firefox3+, Opera10+
Google Chrome does not work with cookies if run locally (i.e file://) For more details: http://code.google.com/p/chromium/issues/detail?id=535