Accordion

As part of a new UI library, I have put together an accordion feature using the jQuery UI Accordion in a manner that follows the guidelines found in the Webgrown Solutions UI Manifesto. The Accordion supports the following features:

• Control of overall height and individual section height.
• Allow all sections to be closed, or keep one always open.
• Control what type of user event toggles the sections (click, mouse over, etc.).
• Specify which section to open by default.
• UI Manifesto compliance:
  • Loosely Coupled Markup
  • Functional Flexibility
  • Future Proof
  • Simple Implementation

The Demo

The Markup

Just some basic page elements (<h3>, <div>, etc.), with a normal class attribute and some custom data (data-*) attributes to allow feature customization. Once the CSS and Script stuff are in place on a website, any page can implement the Accordion by simply setting the top-level wrapping element of the accordion markup with the class attribute to "accordion", and setting the desired optional custom data attributes. The custom data attributes are optional, so the accordion could simple have only the standard markup plus the class attribute.

That sounds like a DRY solution to me (see UI Manifesto).

<div class="accordion"
    data-defaultActiveSection="#accordionSection2"
    data-makeSectionHeightsEqual="true"
    data-keepOneSectionAlwaysOpen="false"
    data-userEventToTriggerSectionToggle="click"
    data-fillParentElement="false">
    <h3 id="accordionSection1"><a>Section 1</a></h3>
    <div>
        <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.
            Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a
            nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.
            Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3 id="accordionSection2"><a>Section 2</a></h3>
    <div>
        <p>
            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus
            hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum
            tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
        </p>
    </div>
    <h3 id="accordionSection3"><a>Section 3</a></h3>
    <div>
        <p>
            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus
            pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque
            semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam
            nisi, eu iaculis leo purus venenatis dui.
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3 id="accordionSection4"><a>Section 4</a></h3>
    <div>
        <p>
            Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada
            fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et
            ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
        </p>
        <p>
            Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class
            aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        </p>
    </div>
</div>    

Not shown to the general public.
        

Not shown to the general public.
        

In addition to the markup, CSS, and JavaScript code samples found below the demo, the following resources/files are required:

• jQuery (current release)
• jQuery UI
  (must include Accordion widget, with its dependencies)