19 Desember 2012

jQuery Collapse


Collapsible Content with JavaScript

This plugin provides you an accessible and lightweight solution to a widely adopted interface pattern known as progressive disclosure.
Read the full documentation for more info.

Basic Usage

<div id="demo" data-collapse="accordion persist">
  <h2>Fruits</h2>
  <ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
  </ul>
  <h2>Hint</h2>
  <div>
    <p>One fruit a day keeps the doctor away</p>
  </div>
  <h2>Third</h2>
  <p>Just a paragraph here</p>
</div>

Fruits

  • Apple
  • Pear
  • Orange

Saying

Third

Features

Persistence

Remembers open sections on page reload using either HTML5 localStorage or cookies!

Accordion

jQuery Collapse is packed with the classic 'accordion' behaviour that can be easily toggled on and off.

WAI-ARIA Compliance

The plugin has been designed with WAI-ARIA in mind which defines a way to make Web content and Web applications more accessible to people with disabilities.

Lightweight

Cross Browser

 A few examples 

To better understand how these examples work I recommend you toview the source.

Default Example

Accordion Example

Persistence Example

Custom show & hide

w/ CSS3 Animations

Custom markup example

Binding events

'Section 1' was closed

Open section by default

Tidak ada komentar:

Posting Komentar