(^380) ❘ CHAPTER 15 ACCORDION
$(document).ready(
function()
{
$('ul').accordion({
active : 1,
event : 'mouseover'
});
}
);
The preceding modifi cation makes no visible change, so you see a document that looks similar to the
one referred to in Figure 15-2. However, when you load it in a browser, you can transition between
content panes using a mouseover event instead of a click event.
The preceding example is available in the source materials as Example 15-5 but is not shown here.
Setting the Header Elements
By default, the Accordion uses the <a> element as a header within each <li> element. However, you
don’t have to use an <a> element as the header; the following example, available in the source mate-
rials as Example 15-6, illustrates how to use an <h4> element instead of an <a> element:<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>Accordion Plugin</title>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='Example 15-6.js'></script>
<link href='Example 15-6.css' rel='stylesheet' />
</head>
<body>
<h4>The Beatles</h4>
<ul>
<li>
<h4>John Lennon</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum luctus rutrum orci. Praesent faucibus tellus
faucibus quam. Aliquam erat volutpat. Nam posuere.
</p>
</li>
<li>
<h4>Paul McCartney</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum luctus rutrum orci. Praesent faucibus tellus
faucibus quam. Aliquam erat volutpat. Nam posuere.
</p>
</li>