Compact sections
This code provides a way to have semantic, accessible (WCAG) XHTML content that is unobtrusively transformed by JavaScript into expandable sections, that remain accessible (ARIA).
The expandable sections can be displayed with either an accordian or tabbed interface.
These interfaces allow (and encourage) deep-linking to anchor
points within the page (expanding the appropriate section on page load).
As of version 2.5, the updating of the URL hash (fragment identifier) for the currently expanded section seems to induce flicker in modern browsers. This feature is now configuarble, but disabled by default. In future, if flicker problems can be minimised, this feature may be enabled by default.
Road map
In the near future I would like to extend this class to provide a tabbed-pane display as an alternative to the expandable sections display, using the same semantic markup.Update: As of version 1.9 Compact sections does support a tabbed-pane display using the same semantic markup, see examples below.
-
Support keyboard navigation for accordian sections display mode.Update: As of version 2.0 Compact sections supports keyboard navigation. The accordian labels and tabs can be tabbed through in a device independant way.
-
Add ARIA support including improved keyboard navigation.Update: As of version 2.5 Compact sections uses integrated ARIA roles, states and properties to further increase the accessibility of these components. Each compact content instance (widget) can be tabbed into and out of, then within each widget sections can be traversed and expanded using the arrow keys.
The obvious application in future, is that once XHTML 2 becomes prevalent, this code should be repurposed to target the
<section>and<h>tags. Until then we target<div class="section">and any heading tag (<h2>,<h3>etc…).
Examples
Place the following code in the <head>
of your XHTML document.
Note: For best performance, it is recommended that you combine all the JavaScript files below into a single file and use packer to compress them before use.
<link rel="stylesheet" type="text/css" href="compact.css" />
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.utilities.js"></script>
<script type="text/javascript" src="jquery.intercept.js"></script>
<script type="text/javascript" src="jquery.jaria.js"></script>
<script type="text/javascript" src="jquery.compact.js"></script>
<!-- This final script block is optional. It shows that compact
sections can be initiated for any element selected using jQuery -->
<script type="text/javascript"><!--
$(document).ready(function() {
$('.compact').compact();
});
--></script>Accordian (default) display
Customise the following code
with your own content then paste into the <body> tag of your XHTML document.
Caution: Make sure to use a unique id for each <div class="section">!
<h1>Compact sections test page</h1>
<div class="compact">
<div class="section" id="lorem-ipsum">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="section" id="in-a-orca">
<h2>In a orci</h2>
<p>In a orci. Aenean et mi quis dui semper nonummy. </p>
</div>
<div class="section" id="maecenas">
<h2>Maecenas mattis</h2>
<p>Maecenas mattis. In interdum pede in ipsum. </p>
</div>
</div>Tabbed display
To use the tabbed-pane display instead of expanding sections, just add the class tabbed to the <div class="compact">, as per the example below.
<h1>Compact sections test page</h1>
<div class="compact tabbed">
...The XHTML code generated by tabbed presentation is ideal for styling using the technique outlined in the A List Apart article Sliding Doors of CSS II.
Working example
A complete demonstration of the compact sections plugin is available.
Download
Compact sections is licensed under the Common Public License Version 1.0, by downloading and/or using it you are agreeing to abide by the terms of that license.
Package
Download the complete Compact sections 2.5 example package (.zip)