(^376) ❘ CHAPTER 15 ACCORDION
Changing the Default Pane
At this point, you have a functioning Accordion UI. This section shows you how to change the
content pane that’s displayed by default. Out-of-the-box, the Accordion plugin displays the fi rst
content pane, but using the active option, you can force a different content pane to be displayed.
The following markup document, which appears as Example 15-2 in the source materials, demon-
strates this concept:<!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-2.js'></script>
<link href='Example 15-2.css' rel='stylesheet' />
</head>
<body>
<h4>The Beatles</h4>
<ul>
<li>
<a href='#'>John Lennon</a>
<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>
<a href='#'>Paul McCartney</a>
<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>
<a href='#'>George Harrison</a>
<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>
<a href='#'>Ringo Starr</a>
<p>