JQuery Accordion

By using jquery we can create the accordion menu, the following example will explain you how to do that.


Accordion with auto height

Section 1
Section 1 content here

Section 2
Section 2 content here

Section 3
Section 3 content here

Section 4
Section 4 content here



Accordion with fixed height

Section 1
Section 1 content here







Seciton 1 End
Section 2
Section 2 content here







Seciton 2 End
Section 3
Section 3 content here Section 3 content here Section 3 content here Section 3 content here Section 3 content here Section 3 content here Section 3 content here







welcome
Section 4
Section 4 content here



CSS

<style type="text/css"> .accordion { width: 600px; display: inline-block; border: solid 1px #ccc; border-top: none; background-color: #f5f5f5; } .accordionheading { cursor: pointer; padding: 5px 15px; border-top: solid 1px #ccc; font-weight: bold; } .accordioncontent { display: none; background-color: #fff; padding: 3px 15px; border-top: solid 1px #ccc; } .accordionactive { } .fixedheight div.accordioncontent { height: 100px; overflow: auto; } </style>


JQuery Script

<script language="javascript"> $(document).ready(function () { $(".accordion").find(".accordioncontent:first").addClass("accordionactive").css("display", "block"); $(".accordion").find(".accordionheading").click(function () { if (!$(this).next().hasClass("accordionactive")) { $(this).parent().find(".accordionactive").removeClass("accordionactive").slideUp(1000) $(this).next().addClass("accordionactive").slideDown(1000); } }); }); </script>


HTML

<p> <br /> <span class="tutorialsideHeading">Accordion with auto height</span> <br /> <div id="div1" class="accordion"> <div class="accordionheading"> Section 1</div> <div class="accordioncontent"> Section 1 content here<br /> <br /> </div> <div class="accordionheading"> Section 2</div> <div class="accordioncontent"> Section 2 content here<br /> <br /> </div> <div class="accordionheading"> Section 3</div> <div class="accordioncontent"> Section 3 content here<br /> <br /> </div> <div class="accordionheading"> Section 4</div> <div class="accordioncontent"> Section 4 content here<br /> <br /> </div> </div> </p> <p> <br /> <span class="tutorialsideHeading">Accordion with fixed height</span> <br /> <div id="div2" class="accordion fixedheight"> <div class="accordionheading"> Section 1</div> <div class="accordioncontent"> Section 1 content here<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Seciton 1 End </div> <div class="accordionheading"> Section 2</div> <div class="accordioncontent"> Section 2 content here<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Seciton 2 End </div> <div class="accordionheading"> Section 3</div> <div class="accordioncontent"> Section 3 content here Section 3 content here Section 3 content here Section 3 content here Section 3 content here Section 3 content here Section 3 content here <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> welcome </div> <div class="accordionheading"> Section 4</div> <div class="accordioncontent"> Section 4 content here<br /> <br /> </div> </div> </p>