Formatting Content

Using the accordion () method drastically changes the appearance of HTML elements in the rendered page. Indeed, this method scans the HTML and adds new CSS classes to the elements (here, the accordion menus) to give them the appropriate style.

Here, for example, the HTML code that appears after the accordion () instruction has been changed (Figure 3-3). This code was retrieved using the Firebug extension in Firefox.

It is also possible to use the CSS classes of elements to customize the display. For example, if we alter the ui-accordion-header CSS class associated with <h1> elements, we should get a new appearance for the menu titles. Similarly, if we change the ui-accordion-content CSS class associated with <div> elements, we get a new aspect for the content of menus.

HTML code generated by the accordion () method

Figure 3-3. HTML code generated by the accordion () method

Modify these elements in the HTML by adding a <style> tag (shown in bold):

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

<style type=text/css>
  h1.ui-accordion-header {
    font-size : 10px;
  }
  div.ui-accordion-content {
    font-size : 15px;
    font-family : georgia;
    font-style : italic;
  }
</style> <div id="accordion"> <h1><a>Menu 1</a></h1> <div>Menu Contents 1</div> <h1><a>Menu 2</a></h1> <div>Menu ...

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.