1. Include the necessary JQuery's scripts and css in the head tag.
For Accordion, the jquery-ui must include accordian and widgets related scripts.
You can download it from here.
<script type="text/javascript" src="scripts/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="scripts/jquery-ui-1.8.14.custom.min.js"></script> <link href="css/jquery-ui-1.8.14.custom.css" rel="stylesheet"></script>
2. Include this script in the head tag
<script type="text/javascript">
$(function() {
$('#section').accordion();
});
</script>
3. Include this html in the body
<div id="section"> <h3><a href="#">Section 1</a></h3> <div> This is section1.</div> <h3><a href="#">Section 2</a></h3> <div>This is section2.</div> <h3><a href="#">Section 3</a></h3> <div>This is section3.</div> <h3><a href="#">Section 4</a></h3> <div>This is section4.</div> <h3><a href="#">Section 5</a></h3> <div>This is section5.</div> </div>
View the complete code here. This example output
