9 min read

Accordion’s structure

Let’s take a moment to familiarize ourselves with what an accordion is made of. Within the outer container is a series of links. These links are the headings within the accordion and each heading will have a corresponding content panel, or drawer as they are sometimes referred to, which opens when the heading is clicked. The following screenshot shows these elements as they may appear in an accordion:

jQuery UI Accordion Widget - Part 1

It’s worth remembering that when using the accordion widget, only one content panel can be open at any one time. Let’s implement a basic accordion now. In a blank page in your text editor, create the following page:





jQuery UI Accordion Widget Example 1




  • Header 1
    Wow, look at all this content that can be shown or hidden with a simple click!



  • Header 2
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpatligula. Integer
    vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut
    bibendum velit enim eu lectus. Suspendisse potenti.



  • Header 3
    Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis.
    Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.










Save the file as accordion1.html in your jqueryui folder and try it out in a browser. We haven’t specified any styling at all at this stage, but as you can see from the following screenshot, it still functions exactly as intended:

jQuery UI Accordion Widget - Part 1

Little code is required for a basic working version of the accordion widget. A simple unordered list element is the mark-up foundation which is transformed by the library into the accordion object.

The following three separate external script files are required for an accordion:

  • The jQuery library itself (jquery-1.2.6.js)
  • The UI base file (ui.core.js)
  • The accordion source file (ui.accordion.js)

The first two files are mandatory requirements of all components of the UI library. They should be linked to in the order shown here. Each widget also has its own source file, and may depend on other components as well.

The order in which these files appear is important. The jQuery library must always appear first, followed by the UI base file. After these files, any other files that the widget depends upon should appear before the widget’s own script file. The library components will not function as expected if files are not loaded in the correct order.

Finally, we use a custom

Following this, we use the simple ID selector $(“#myAccordion”) to specify the element on the page we want to transform. We then use the accordion() constructor method to create the accordion

Other elements can be turned into accordions as well. All list element variants are supported including ordered lists and definition lists. You don’t even need to base the accordion on a list element at all. You can build a perfectly functional accordion using just nested

and elements, although additional configuration will be required

In the above example, we used an empty fragment (#) as the value of the href attribute. You should note that any URLs supplied for accordion headers will not be followed when the header is clicked within the accordion when using the default implementation.

Styling the accordion

With no styling, the accordion will take up 100% of the width of its container. Like with other widgets, we have several options for styling the accordion. We can create our own custom stylesheet to control the appearance of the accordion and its content, we can use the default or flora themes that come with the library, or we can use Theme Roller to create an extensive skin for the whole library. Let’s see how using the flora theme for the accordion will cause it to render. In accordion1.html, add the following tag to the of the page:


Save the new file as accordion2.html, also in the jqueryui folder, and view it again in a browser. It should appear something like this:

jQuery UI Accordion Widget - Part 1

The accordion theme file assumes that an unordered list is being used as the basis of the widget and specifically targets

  • elements with certain style rules. We can easily create our own custom theme to style the accordion for situations where we want to use a non-list-based accordion widget, or if we simply want different colors or font styles.

    You can use the excellent Firebug plugin for Firefox, or another DOM viewer, to see the class names that are automatically added to certain elements when the accordion is generated. You can also read through an un-minified version of the source file if you really feel like it. These will be the class names that we’ll be targeting with our custom CSS.

    The following screenshot shows Firebug in action:

    jQuery UI Accordion Widget - Part 1

    Change accordion2.html so that it appears as follows (new code is shown in bold):






    jQuery UI Accordion Widget Example 3




    Header 1
    Wow, look at all this content that can be shown or hidden with a simple click!

    Header 2
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam
    iaculis volutpatligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum,
    turpis tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse potenti.

    Header 3
    Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc.
    Pellentesque tincidunt viverra felis. Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.








    Save this version as accordion3.html in the jqueryui folder. The class name ui-accordion is automatically added to the accordion’s container element. Therefore, we can use this as a starting point for most of our CSS selectors. The links that form our drawer headers are given the class ui-accordion-header so we can also target this class name. In a new file, create the following stylesheet:

    #myAccordion {
    width:200px;
    border:2px solid #000000;
    position:relative;
    list-style-type:none;
    padding-left:0;
    }
    .ui-accordion-header {
    text-decoration:none;
    font-weight:bold;
    color:#000000;
    display:block;
    width:100%;
    text-align:center;
    }
    .ui-accordion div div {
    font-size:90%;
    }
    .ui-accordion a {
    color:#ffffff;
    background:url(../img/accordion/header-sprite.gif) repeat-x 0px 0px;
    }
    .ui-accordion a.selected {
    background:url(../img/accordion/header-sprite.gif)
    repeat-x 0px -22px;
    }
    .ui-accordion a:hover {
    background:url(../img/accordion/header-sprite.gif)
    repeat-x 0px -44px;
    }
    /* container rounded corners */
    .corner {
    position:absolute;
    width:12px; height:13px;
    background:url(../img/accordion/corner-sprite.gif) no-repeat;
    }
    .topLeft {
    top:-2px; left:-2px;
    background-position:0px 0px;
    }
    .topRight {
    top:-2px; right:-2px;
    background-position:0px -13px;
    }
    .bottomRight {
    bottom:-2px; right:-2px;
    background-position:0px -26px;
    }
    .bottomLeft {
    bottom:-2px; left:-2px;
    background-position:0px -39px;
    }

    Save this file as accordionTheme.css in your styles folder and preview accordion3.html in a browser. We will need a new folder for the images we use in this and subsequent examples. Create a new folder inside the img folder and name it accordion. With just two images, and a few simple style rules, we can drastically change the default appearance of the accordion with our own custom skin as shown in the following screenshot:

    jQuery UI Accordion Widget - Part 1

    Configuring accordion

    The accordion has a range of configurable properties which allow us to easily change the default behaviour of the widget. The following table lists the available properties, their default value, and gives a brief description of their usage:


  • Subscribe to the weekly Packt Hub newsletter. We'll send you the results of our AI Now Survey, featuring data and insights from across the tech landscape.

    * indicates required

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here