Examples of Using Accordion Menus

In this section, we’ll incorporate the use of menus into a UI.

Opening Any Menu

When creating an accordion menu, the first menu (index 0) is open by default. Let’s configure our page to open the second menu (index 1) instead. This is done using accordion ("activate"):

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<div id="accordion">
  <h1><a>Menu 1</a></h1>
  <div>Menu Contents 1</div>
  <h1><a>Menu 2</a></h1>
  <div>Menu Contents 2</div>
  <h1><a>Menu 3</a></h1>
  <div>Menu Contents 3</div>


$("#accordion").accordion ().accordion ("activate", 1);


The first accordion () method is required to create the accordion menu, while the second method activates the menu with index 1.

The second menu is open at the launch of the application, as shown in Figure 3-5.

Opening the second menu using the “activate” action

Figure 3-5. Opening the second menu using the “activate” action

Loading the Contents of a Menu with Ajax: Using options

Let’s change the menu contents via Ajax when it opens. We will use the options.change and options.changestart methods. The options.changestart method will display a placeholder (in this case, "Loading") and the options.change method makes the Ajax call:

<!DOCTYPE html> <script src = jquery.js></script> <script src ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.