This post is for beginners. It shows how to make a basic jquery UI accordion. We will use a predefined jquery ui for the accordion. There is a link to the demo right before the entire code snippet.
HTML for Basic jQuery UI Accordion
<!-- begin html for accordion -->
<div style="width: 360px;">
<div id="accordion">
<h3>
<a href="#">ASP.NET</a></h3>
<div class="">
<h4>
ASP</h4>
<p>
<a href="http://www.surfingsuccess.com/tag/asp/">ASP stuff</a></p>
</div>
<h3>
<a href="#">CSS</a></h3>
<div>
<h4>
CSS</h4>
<p>
<a href="http://www.surfingsuccess.com/tag/css/">CSS Stuff</a><br />
<a href="http://www.surfingsuccess.com/css/clearfix.html">CSS Clearfix</a>
</p>
</div>
<h3>
<a href="#">Javascript</a></h3>
<div>
<h4>
Javascript</h4>
<p>
javascript<br />
<a href="http://www.surfingsuccess.com/tag/jquery/">jQuery</a><br />
Dojo<br />
Backbone</p>
</div>
</div>
</div>HTML Code in header
The first 2 reference the jQuery library and the jQuery UI library to make the accordion functional. The third gets the CSS needed from a theme for the look.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />jQuery for Accordion
Here is the jQuery code to make the accordion work. Several parameters are included. Hopefully this will help you tweak as needed
If you need info on more parameters, I would start here first, then here, then here.
$(document).ready(
function () {
$("#accordion").accordion({ header: "h3",
autoheight: false,
active: false,
alwaysOpen: false,
fillspace: false,
collapsible: true,
//heightStyle: 'content' //auto, fill, content
});
});The Entire jQuery UI Accordion Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic jQuery Accordion</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(
function () {
$("#accordion").accordion({ header: "h3",
autoheight: false,
active: false,
alwaysOpen: false,
fillspace: false,
collapsible: true,
//heightStyle: content //auto, fill, content
});
});
</script>
</head>
<body>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-- begin html for accordion -->
<div style="width: 468px;">
<div id="accordion">
<h3>
<a href="#">ASP.NET</a></h3>
<div class="">
<h4>
ASP</h4>
<p>
<a href="http://www.surfingsuccess.com/tag/asp/">ASP stuff</a></p>
</div>
<h3>
<a href="#">CSS</a></h3>
<div>
<h4>
CSS</h4>
<p>
<a href="http://www.surfingsuccess.com/tag/css/">CSS Stuff</a><br />
<a href="http://www.surfingsuccess.com/css/clearfix.html">CSS Clearfix</a>
</p>
</div>
<h3>
<a href="#">Javascript</a></h3>
<div>
<h4>
Javascript</h4>
<p>
javascript<br />
<a href="http://www.surfingsuccess.com/tag/jquery/">jQuery</a><br />
Dojo<br />
Backbone</p>
</div>
<h3>
<a href="#">Other</a></h3>
<div>
<h4>
Stuff</h4>
<p>
</p>
</div>
</div>
</div>
<!--</div>-->
<!-- end html for accordion -->
</body>
</html>
