Compact sections

This code provides a way to have semantic, accessible XHTML content that is unobtrusively transformed by JavaScript into expandable sections.

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).

Road map

1. 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.

2. Improve keyboard navigation for accordian sections display mode.

   Update: As of version 2.0 Compact sections has better support for keyboard navigation. The accordian labels and tabs can be tabbed through in a device independant way.

3. 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…).

<link rel="stylesheet" type="text/css" href="compact.css" />
<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script type="text/javascript" src="jquery.utilities.js"></script>
<script type="text/javascript" src="jquery.dimensions.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>

<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>

<h1>Compact sections test page</h1>
<div class="compact tabbed">
    ...