Custom Accordion Header Icons

The jQuery UI accordion widget has an icons option that let's the developer change the defaults. The defaults use the ui-icon-triangle-1-e icon for the collapsed state, and the ui-icon-triangle-1-s icon for the expanded state. These are classes taken from the theme framework, and so the fundamental limitation is that you have to use an icon that's already there. Either that, or extend the available icons available to your theme. The latter option is painful if all you want to do is use an accordion header icon specific to the content found in that section.

Using Section Elements With Accordions

HTML5 has a new section element. This is a generic grouping element, used to divide the page into sections. For instance, you might have three of these on a page, each with a header tag as the first section element. In other words, sections are essentially divs that just read better in the HTML. Who doesn't want more semantic meaning in their markup?

Activate Accordion Section By URL Hash

The jQuery UI tabs widget has the ability to activate specific tab sections based on the hash string. For example, a link on another page may point to tabs.html#tab2, and when that address is followed, the second tab is opened as expected. This is not the case, however, with the accordion widget. For one thing, there are no links in the accordion header markup. Just headers. When the accordion is the main organizational unit on the page, it would be handy to have this linking ability.

Applying Themes To Selected Text

When the user selects text in the browser, they generally get the browser default styles. That is, the default background color and the default text color for selected text. This is fine, in most cases. But if you want that extra level of polish added to your page, you can do so by using the CSS ::selected pseudo element. What's more is you can directly transfer jQuery UI theme property values to selected text using the following technique.

jQuery UI: Remote Accordion Content

The jQuery UI tabs widget supports loading tab content from remote sources out of the box. The accordion widget, however, does not. Which is unfortunate because there are advantages to deferring the loading of content till the section is expanded. Your application may have an accordion for several seldom, if ever, sections that are opening. That's a big cost savings, so let's see how we can implement such a capability.

jQuery UI: Sortable Accordion Sections

Using a fixed ordering for your accordion sections is all well and good, but why not let the user sort the sections themselves? Seems like a good idea to me — especially with the help of sortable, it should be a straightforward customization of the accordion widget to enable this behavior. There is, however, one gotcha that makes this customization nontrivial. The DOM structure of the accordion section has a header, followed by the content div. How should we make sortable deal with that?

jQuery UI: Expand All Accordion Sections

Something I find annoying about the accordion widget is that I can't have more than one active section. If the application has vertical space constraints, maybe having only one accordion section active at a time makes sense. But as a user, I generally want more than one section open at once. This isn't offered out of the box with the jQuery UI accordion widget. This capability is not the intent of the accordion. But, it's not too difficult make it happen. Here is my attempt at an expandable accordion.

jQuery UI: Simplified Accordion

Maybe you're using the jQuery UI accordion widget, and you don't necessarily like the way it looks by default. Maybe this isn't a tunable theme setting that the theme roller can fix either. I know I've been faced with this situation before, I just want the widget simplified, right down to the bare essentials. There is a quick hack we can use to achieve this with the accordion if all you're looking for is a visual simplification.

jQuery UI: Disable Accordion Section

The disabled option of the accordion widget let's you disable the entire widget when set to true. But I don't want to disable the whole thing, only specific sections. Turns out, it isn't all that hard to make the disabled option understand this concept by extending the widget with some new behavior. The only requirement of the change is that we're able to pass a section index to the disabled option to disable that section only. So passing 0 would disable the first section, and so on. The trick to accomplishing this is that the default accordion implementation will ignore non-boolean values of disabled. This is where we can come in, and check for numbers.

Remembering jQuery UI Accordion Selections

The jQuery UI accordion widget is a great way to group logical sections of your page together.  The accordion widget is actually an alternative to the tabs widget - they're both just layout containers.

So if I'm using an accordion widget as the main layout component on one of my pages, it would be nice if we had a way to preserve the selected section.  My approach to this is by using hashes in the URL.  Below is the basic HTML markup:

<html>
    <head>
        
        <title>jQuery UI Accordion Selection</title>
        
        <link type="text/css" href="jqueryuitheme.css" rel="stylesheet"/>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jqueryui.min.js"></script>
        <script type="text/javascript" src="accordion.js"></script>
        
    </head>
    <body>
        
        <div id="accordion">
            <h3><a href="#section1">Section 1</a></h3>
            <div>
                Section 1 content...
            </div>
            <h3><a href="#section2">Section 2</a></h3>
            <div>
                Section 2 content...
            </div>
            <h3><a href="#section3">Section 3</a></h3>
            <div>
                Section 3 content...
            </div>
        </div>
                    
    </body>
</html>

And here is the accordion.js file:

$(document).ready(function(){
    
    //Get the selected accordion index, based on the URL hash.
    var index = $('#accordion h3').index(
                $('#accordion h3 a[href="'+window.location.hash+'"]')
                .parent());
                
    //The index will be -1 if there is no hash in the URL.  This
    //is necessary if we want the first section expanded by default.
    if (index < 0){
        
        index = 0;
        
    }
    
    //The change event handler will add the hash to the URL when
    //a section is selected.
    var change = function(event, ui){
    
        window.location.hash = ui.newHeader.children('a').attr('href');
        
    }
       
    //Build the accordion, using the URL hash selection and the
    //change event handler.
    $('#accordion').accordion({active: index,
                               change: change});
                                   
});

We can now use the URL hash to set the accordion selection.  This is how it works:

The first variable - index - is the index of the accordion selection.  So 0 is the first accordion section, 1 the second, and so on.  This selector is a little tricky because inside the #accordion div, we have alternating h3 and div elements, so the h3 indexes aren't linear.  To get around this, we have two selectors.  The first one filters out all the h3 elements we're interested in.  Now that we have only h3 elements, we can call index() on them - we won't get invalid indexes due to intermingled divs.  We pass index() the h3 element we're interested in, namely, the one with the a that has an href matching the current URL hash.

Phew, so now we've got an index we can use to select the appropriate section.  Or do we?  If the user is visiting this page for the first time, there won't be any hash in the URL.  This means the value of index will be -1.  We don't want that, so we give it a value of 0 if there is now real index to use.  This way the first section is active be default.  This is the expected behaviour, I would say, 99% of the time.

Next, we define an event handler - change - that is triggered when the user changes accordion sections.  All this handler does is set the URL hash, allowing the default functionality associated with changing sections to run normally.  For example, changing to section two in our example will add #section2 to the URL.

Finally, we build the accordion widget using the selected index and the change event handler.  This isn't a perfect solution, but it does solve some headaches with accordion widgets - like the back button and bookmarks.