Progressive Disclosure
This Plugin delivers an accessible and lightweight solution to a widely adopted interface pattern (known as progressive disclosure). It includes features like cookie persistence, ARIA compliance, and is designed to be flexible and modular enough to be used in many different't scenarios.
Demo / Usage
It's all around you! / README
Options
show
A function that defines how the content should be visually expanded.
- default
- function() { this.show(); }
- type
- function
hide
A function that defines how the content should be visually hidden.
- default
- function() { this.hide(); }
- type
- function
head
Type of element you want act as clickable headings.
- default
- "h2"
- type
- string
group
Type of element to group hidden content.
- default
- "div, ul"
- type
- string
cookieName
Name of cookie used by the plugin.
- default:
- “collapse”
- type:
- string
Features
Tasty cookies
jQuery-Collapse is packed with cookie support. It'll remember what's visible and what's not. Just include the jQuery cookie plugin and it works! The plugin will gracefully degrade if cookie support is not available.
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
jQuery-Collapse is designed to be a lightweight plugin that performs well both on small and big scales. It's less than 600 bytes when compiled!
Cross Browser
Fully tested in IE6+, Firefox3+, Chrome5+, Safari4+, Opera 10+. Degrades gracefully in unsupported browsers
Customizable
jQuery-Collapse is designed to be flexible and modular. Options include custom callbacks to satisfy every customization need.
And here's some good advice before you get started
Hiding content
Because of the loading nature of DOM and JavaScript the content you're hiding sometimes appears for a few milliseconds before hidden properly. This isn't pretty.
At first, it may be tempting to use CSS display:none because it's easy and it works, but this is bad bad BAD because your content will be inaccessible in the event of a JavaScript failure.
Unobtrusive hiding of content with JavaScript and CSS
The trick is to use a combination of JavaScript and CSS. Run this script in the head of your document:
document.documentElement.className = "js";
Now you can safely hide whatever content by prefixing with .js class
.js .some-element {display: none;}
F.A.Q
- How can I modify the plugin to "slide" in the content?
-
It's easy! Just provide your own show method to the plugin option.
$("#options, #features .box").collapse({
show: function() {
this.animate({
opacity: 'toggle',
height: 'toggle'
}, 300);
}
});
- How do I make the content visible by default?
Add class="active" to the heading preceding the disclosed content
<h2 class="active">Heading</h2>
<div>Disclosed content</div>
What about HTML5?
<details>
There is new element in the HTML5 specification that will provide native support for progressive disclosure.
<details>
<summary>This is a summary within detail</summary>
<p>Content disclosed within the detail.</p>
</details>
No browser supports this (as of now) but we could upgrade our markup to HTML5 anyways and let jQuery-Collapse act as a fallback.
$("details").collapse({head: "summary", group: "p"})
Bruce Lawson has more to say about this.
Demo
This is a summary within detail (click me)
Content disclosed within the detail.
Further reading and so on...
Books
Would you rather do something by yourself? Here's a few books on the topic of interface design and programming that I highly recommend.
Disclaimer: These are affiliate links to Amazon, if you buy a book through these you'll sponsor further development of this and other similar projects.