O'Reilly logo

jQuery UI by Eric Sarrion

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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>
</div>

<script>

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

</script>

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required