Skip to a section of this page:

Compact content widgets

This code provides a way to have semantic, accessible (WCAG) XHTML content that is unobtrusively transformed by JavaScript into compact interactive widgets, that remain accessible (ARIA).

The expandable sections can be displayed with either a tabbed, slideshow or sliding panels (slider) presentation.

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 minified file.

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.jaria.js"></script>
<script type="text/javascript" src="jquery.compact.js"></script>

You must then include a script and stylesheet for each display behaviour you wish to use:

<link rel="stylesheet" type="text/css" href="tabbed.css" />
<link rel="stylesheet" type="text/css" href="slideshow.css" />
<link rel="stylesheet" type="text/css" href="slider.css" />
<script type="text/javascript" src="jquery.compact.tabbed.js"></script>
<script type="text/javascript" src="jquery.compact.slideshow.js"></script>
<script type="text/javascript" src="jquery.compact.slider.js"></script>

You can also use the following optional scripts for added functionality:

<!-- Recommended: Allows widgets to react when the browser window or text size is changed -->
<script type="text/javascript" src="jquery.resize-events.js"></script>

<!-- Recommended: Equips widgets (in browsers that support ARIA) with improved keyboard navigation -->
<script type="text/javascript" src="jquery.aria.key-nav.js"></script>

<!-- Allows the status of each widget to be stored in a cookie and remember each time the page is visited -->
<script type="text/javascript" src="jquery.cookie.js"></script>

<!-- Allows compact plugins to check for CSS support before creating widgets that rely on CSS -->
<script type="text/javascript" src="jquery.got-style.js"></script>

Basic markup

No matter which presentation type you choose (tabbed, slideshow or slider), the same basic markup is used. Customise the following code with your own content then paste into the <body> tag of your XHTML document.

Note: It is important that every <div class="compact"> and each <div class="section"> have a unique id!

<div class="compact" id="example">
    <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>

Presentation types

There are currently three supported presentation types, each with their own pages detailing their use and configuration:

Changelog

  • 3.2: Improvements to the $.frag function to support updating of hash value. This is utilised by tabbed presentation 0.91: By default, selecting a tab now updates the URL fragment id. Also, when a user sets the fragment id in the URL, if it matches a tabbed section, this section will be expanded on load. Also thanks to Gerard Hynes for patching a bug that occurred when the tabbed section saved in the cookie no longer exists.
  • 3.3: Added support for fieldset/legend combos, thanks to Hugh Barnes for the idea. Also added support for content before and after tabbed sections, within compact container (tabbed presentation 0.92).

Older versions

The Compact sections 2 codebase was significantly rewritten creating version 3, but is still available for sake of nostalgia.