jQuery Accordion Instructions
- Place the following between the
<head> and </head>
tags. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#accordion").accordion({
collapsible: true,
active: 0
});
});
</script> Optional: For the default styling as seen in
the demo you can also add <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
- Add your HTML to create the accordion, wrap the HTML in a
<div>
that has an id or class matching the selector above. <div id="accordion">
<h3><a href="#">Header 1</a></h3>
<p>Here is some contents!</p>
<h3><a href="#">Here is another</a></h3>
<p>Now you can see me!</p>
<h3><a href="#">Show me more!</a></h3>
<p>Here you go...</p>
</div>
Notes:
A few of the more useful options:
- collapsible: makes it so the open accordion can be closed by clicking
it again.
- active: sets a particular pane to be open by default (0 based index)
View more on
http://docs.jquery.com/UI/Accordion