The jQuery UI .accordion() creates an interactive page where the user can click on a topic and the panel expands to show more content.

This is a great way to save space on your web page and highlight the various headings. It is often used for webpages with a list of questions and answers.

The complete explanation can be found at: jqueryui.com/accordion/

 

Required jQuery files

As with other jQuery UI functions, you must load the UI library file along with your core jQuery .js file in the <head>...</head> section of your web page.

If you want to use the jQuery styling for the .accordion() sections, you must link to their stylesheets as well that come with the theme that you choose when downloading at jqueryui.com. These styles will place a box and shading for the topics and automatically create arrows for when the panel is open or closed. The accordion function automatically adds class names to the various elements. The stylesheets style these classes. You can override this styling with your own styles, but your stylesheet must load after the jQuery stylesheet in your head section and you need to target the classes that they use. As these are inline styles loaded by jQuery, you need a diagnostic tool like Firebug to see which class names have been applied.

There are other optional jQuery .css files for smoothness that can affect how nicely the panels open and close.

As always, you can choose to upload the required .js files to your own hosting server and link to them at your own site, or provide an external link to Google's jQuery library files

/** Required files **/
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
/** Optional file **/
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

 

The script for using .accordion()

The script for using .accordion() is simple, but your HTML must be set up in a certain way for it to function properly. There are other parameters that you can choose to use to make the panels all closed when the visitor lands on the page, stay open when others are open and so forth. The script below is for the default functionality.

<script>
    $(function() {
        $( "#accordion" ).accordion();
    });
</script>

 

The HTML to use for .accordion()

The HTML tags must be identified properly with class or id names for the selector in the script. 

The id name for the <div> in question MUST match the selector $(' ') between the quotes in the <script> tags. It does not have to be id="accordion", but they need to match.

The <h3> tags will be the heading on each of the panels automatically. If you don't use this format, the panels will not function.

<div id="accordion">
    <h3>Topic A</h3>
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt,</p>
    <h3>Topic B</h3>
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt,</p>
    <h3>Topic C</h3>
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt,</p>
</div>

 

Variations for .accordion()

You can choose to use other variations for the behavior of the panels.  

The default behavior is that when the page loads the top panel is open and the others are closed. If you click on a new topic, the new panel opens and the others close.

You may choose to allow the user to be able collapse a panel that is open. This is done with the collapsible: true; parameter.

<script>
    $(function() {
        $( "#accordion" ).accordion({
            collapsible: true
        });
    });
</script>

Other variations are to adjust the automatic height of the panels to fit the content, change the icons, have the panels open on hover rather than click and to have the panels be sortable.

All of these variations are shown at jqueryui.com/accordion