article:
Website: Website Under Construction
article:
Elements Design: Greek or Roman Pixel Patterns

JS Plugin: Collapse

Advertisement

"Collapse is a lightweight (~1kb) jQuery plugin that enables expanding and collapsing content."


Usage

load jQuery and the jQuery Collapse plugin

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.collapse.js"></script>


some sample HTML markup
<div id="demo" data-collapse>
  <h2>Fruits</h2>
  <ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
  </ul>
  <h2>Info</h2>
  <div>
    <p>You can use any container you like (in this case a div element)</p>
  </div>
</div>

jQuery code
new jQueryCollapse($("#demo"), {
  query: 'div h2'
});

Options

- show (function) : Custom function for showing content (default: function(){ this.show() })
- hide (function) : Custom function for hiding content (default: function(){ this.hide() })
- accordion (bool) : Enable accordion behaviour by setting this option to 'true'
- persist (bool) : Enable persistence between page loads by setting this option to 'true'


Sample with options

// Initializing collapse plugin
// with custom show/hide methods,
// persistence plugin and accordion behaviour
$("#demo").collapse({
  show: function() {
    // The context of 'this' is applied to
    // the collapsed details in a jQuery wrapper 
    this.slideDown(100);
  },
  hide: function() {
    this.slideUp(100);
  },
  accordion: true,
  persist: true
});


Screenshot

Plugin: Collapse


"This plugin provides you an accessible and lightweight solution to a widely adopted interface pattern known as progressive disclosure."



source
demo
documentation
github
download





Advertisement
Tags: plugin, jquery, collapse, open, close, show, develop, layout, web, content

Leave a Comment

No Comment

© Creative3x Ltd.