Expanding an Accordion - J Query


The situation in which one might use an accordion could be somewhat akin to when a file tree might be useful. The paradigms are similar in that each one allows for additional information to be initially obscured from view and then revealed as the user interacts further. They differ, however, in that an accordion is not meant to contain an entire taxonomy of data but rather is used more as a novelty to draw attention to several facets of a site or product. One such accordion example can be seen at https://www.wisdomjobs.com/iphone. This allows for panels of info to be expanded at the user’s leisure, without completely dominating the vertical space allotted to the sidebar. It conserves space not unlike high-density shelving or movable bookcases in a library, allowing one aisle to serve several racks of storage versus having an ever-present aisle between each one.

It is worth noting that there is a jQuery UI accordion widget that is highly customizable and can be given a theme/skin to match the rest of the UI widgets. You can see it inaction at http://jqueryui.com/demos/accordion. The benefit of using the official widget is that it is officially supported by the jQuery UI community and will continue to evolve and become more robust. The potential drawback is the amount of extra code required,if all you need is a simple accordion. On the flip side, the reason one might choose to build a custom accordion component is for a smaller code footprint. This comes at the disadvantages of having the animation not be pixel-perfect and having to set the height in pixels of each accordion panel. It is advised that you consider both options and do what best fits the project at hand.


Using jQuery’s excellent DOM traversal capabilities, namely, adjacent sibling selectors,it is possible to write a script generically enough to handle multiple accordion elements.Additionally, this script is able to handle more elements being added to the accordion,if need be. Figure (Accordion, waiting for the user to expand) shows an accordion that hasn’t yet expanded, while Figure(The expanded accordion)shows its contents, revealed by expanding it.

Figure : Accordion, waiting for the user to expand

Accordion, waiting for the user to expand

Figure : The expanded accordion

The expanded accordion

Accordion—HTML code


This function begins by finding all definition lists with the class of accordion and applyingjQuery’s.each() method to them. Inside each one, the first <dt>link is giventhe class accordion_expanded, and the first <dd>is shown (the rest remain hidden becauseof CSS display: none). Additionally, the last <dt>is given class="last", allowingus to style it uniquely with rounded corners for those browsers that support it. Thisdiffers from the file-tree example, in which we patched browsers that lacked :lastchild.

In the case of the accordion, class="last" will be removed and reapplied basedon user interaction.

The second part of the code handles the crux of the accordion. All links that resideinside the accordion’s <dt>are given a click event listener. When any of these links isclicked, we traverse the DOM upward to the parent <dt>and then over to the next<dd>. If that <dd>is hidden, then we animate it into place via jQuery’s.slideDown()method, while simultaneously calling .slideUp() on all the other sibling <dd>. Whenthis is completed, the callback function findLastis executed, which determines whetherto assign class="last" to the last visible <dt>, depending on whether its accompanying <dd>is hidden.

If that last <dd>is visible, then no action is taken, because the <dd>itself is being roundedvia CSS, targeted via :last-child. Again, the astute reader may wonder, “Why are wenot patching Internet Explorer 6 and 7, since they don’t understand :last-child?” The reason is, while IE 6 and 7 don’t support :last-child, neither do they support roundedcorners via CSS, so in this case there is nothing to be gained.

Finally, the class of accordion_expandedis added to the <dt>link that was clicked, andthat class is removed from all other <dt>links. This causes the arrows in each <dt>toall point to the right, indicating that they are collapsed, with the exception of the most recently clicked <dt>link.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics