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.


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.4.2.js"></script>
<script type="text/javascript" src="jquery.aria.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=""></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 class="section" id="in-a-orca">
        <h2>In a orci</h2>
        <p>In a orci. Aenean et mi quis dui semper nonummy. </p>
    <div class="section" id="maecenas">
        <h2>Maecenas mattis</h2>
        <p>Maecenas mattis. In interdum pede in ipsum. </p>

Presentation types

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


  • 3.2: Thanks to Gerard Hynes for patching a bug that occurred when the tabbed section saved in the cookie no longer exists. Also in this update: 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.
  • 3.3: Thanks to Hugh Barnes for the idea to add support for fieldset/legend combos. Also added support for content before and after tabbed sections, within compact container (tabbed presentation 0.92).
  • 3.4: Thanks to Raven Calais for feedback. Moved UI button title attributes into link text (but visually hidden) so that all assistive technologies can successfully render the button label (even if they don’t appropriately support the title attribute). Also updated hold/release event handlers for next/prev buttons to prevent autoscroll bug and added option to disable hold next/prev support if this functionality is not desired.
  • 3.5: Thanks to Brett Anderson for raising an IE6 issue with the slider plugin. Updated to ARIA keyboard navigation plugin version 0.93 (adding support for browsers back to IE6). Slideshow plugin now tests to ensure ARIA keyboard nav plugin exists before trying to use it. All plugins now have their own unique ‘active’ class so IE6 doesn’t get confused when styling active state. Finally fixed the behaviour of updating the URL fragment for Firefox.
  • 3.5.1: Thanks to Ryan Archer for the suggestion. Added ability to configure the order of playback controls and panel buttons in the generated source order. This can make some presentation treatments easier.
  • 3.5.2: Thanks to Ben Boyle for the contribution of linted code. Tabbed presentation now self-aware of when tabs wrap (sets a class) so that tabs can be styled differently.

Older versions

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

Posted in

Leave a reply