From jQuery JavaScript Library
« Back to the jQuery UI Docs
An expandable/collapsible content pane. Applicable when content must be displayed within limited space.
Depends on
Example
Example:| Name | Type |
|---|
A simple jQuery UI Accordion.
$("#example").accordion();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/ui/ui.accordion.js"></script>
<script>
$(document).ready(function(){
$("#example").accordion();
});
</script>
</head>
<body>
<ul id="example" class="ui-accordion-container" style="width: 200px;">
<li>
<a href='#'>Test 1</a>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
<li>
<a href='#'>Test 2</a>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam <br>
</div>
</li>
<li>
<a href='#'>Test 3</a>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
</ul>
</body>
</html>
Documentation
Demos
What this isn't
An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:
jQuery(document).ready(function(){
$(".accordion .head").click(function() {
$(this).next().toggle();
}).next().hide();
});
Or animated:
jQuery(document).ready(function(){
$(".accordion .head").click(function() {
$(this).next().toggle("slow");
}).next().hide();
});