<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<link href="http://www.jqueryscript.net/demo/Smooth-Nested-Accordion-Plugin-with-jQuery-jQuery-UI-multiAccordion/css/multiaccordion.jquery.min.css" rel="stylesheet" type="text/css" />
<script src="http://www.jqueryscript.net/demo/Smooth-Nested-Accordion-Plugin-with-jQuery-jQuery-UI-multiAccordion/js/multiaccordion.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".accordion").multiaccordion({ defaultIcon: "ui-icon-plusthick",
activeIcon: "ui-icon-minusthick", active: 0, collapsible: true
});
});
</script>
</head>
<body>
<!-- example 1 -->
<div class="accordion blue">
<h3>Simple Accordion 1</h3>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in facilisis orci. Vivamus dapibus feugiat.
</div>
</div>
<!-- example 2 -->
<div class="accordion green">
<h3>Simple Accordion 2</h3>
<div class="content">
<div class="accordion odd">
<h3>Nested Accordion 2.1</h3>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in facilisis orci. Vivamus dapibus feugiat.
</div>
</div>
<div class="accordion odd">
<h3>Nested Accordion 2.2</h3>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in facilisis orci. Vivamus dapibus feugiat.
</div>
</div>
</div>
</div>
<div class="accordion violet">
<h3>Simple Accordion 3</h3>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in facilisis orci. Vivamus dapibus feugiat.
</div>
</div>
</body>
</html>