Create a Simple Accordion with jQuery and CSS (JQuery)

As per the project I have to build a simple accordion and would like to share with you. So here I’m explaining how to build an accordion with jQuery and css. A plus and minus and a small gray gradient images are used in accordion. You can download and use for personal or commercial works but forbidden to redistribute other than bijusubhash.com. If you like this then please spread or back link from your website.The steps are explaining below. You can see a demo and download too.

Step 1: The jQuery Code

<script type="text/javascript" src="../js/jquery.js" ></script> <script  type="text/javascript" language="javascript"> $(document).ready(function(){ $('.adCntnr div.acco2:eq(0)').find('div.expand:eq(0)').addClass('openAd').end() /*find the first child and opended by default, and add class openAd*/ .find('div.collapse:gt(0)').hide().end() .find('div.expand').click(function() { $(this).toggleClass('openAd').siblings().removeClass('openAd').end() .next('div.collapse').slideToggle().siblings('div.collapse:visible').slideUp(); return false; }); }) </script>

Step 2 : CSS Markup

/* Accordion Styles starts */ .adqstdts { min-height:75px; background:#f0f0f1; border:1px solid #dbdbdc; border-left:none; border-right:none; margin-top:7px; padding:7px; } .asdDts { color:#737374; font-size:12px; font-weight:normal; line-height:25px; } .printAd { background:url(../images/printer.png) no-repeat ; padding-left:25px; padding-bottom:2px; padding-top:2px; color:#737374; } .exportAd { background:url(../images/document-export.png) no-repeat ; padding-bottom:2px; padding-left:25px; padding-top:2px; color:#737374; } .adCntnr .acco2 .expand { background:url(../images/title_bar_bg.gif) repeat-x ; line-height:28px; border-left:1px solid #cfcece; border-right:1px solid #cfcece; padding-left:5px; } .adCntnr .acco2 .expand a{ background:url(../images/rnd_plus_icon.png) no-repeat 0 4px; padding-left:25px; text-decoration:none; } .adCntnr .acco2 .openAd a{ background:url(../images/rnd_minus_icon.png) no-repeat 0 4px ; padding-left:25px; color:#333 !important; text-decoration:none; } .adCntnr .acco2 .openAd { background:url(../images/title_bar_bg.gif) repeat-x ; line-height:27px; border-left:1px solid #cfcece; border-right:1px solid #cfcece; padding-left:5px; } .adCntnr .acco2 .expand a{ color:#676f72; } .adCntnr  .accCntnt { border:1px solid #cfcece; border-top:none; padding:10px; background:#f1f1f1; } /* Accordion Styles starts */

Step 3 : HTML Markup

<div class="adCntnr" > <div class="acco2"> <div class="expand"><a title="expand/collapse" href="#" style="display: block;">Title for the First Heading</a></div> <div class="collapse"> <div class="accCntnt"> <div class="titlebarLeftc" style="height:25px; border-bottom:1px solid #dadada;"> <div class="titlebarRightc" style="height:25px;"> <div class="titlebar" style="height:25px;"> <table class="dataGridHdr" width="100%" cellpadding="0" cellspacing="0"> <tr> <td class="dataGridHdr_boder" style="padding-left:0;";>Label One</td> <td width="210" class="dataGridHdr_boder2">Label Two</td> <td width="45" class="dataGridHdr_boder2">Label</td> <td width="40" class="dataGridHdr_boder3">Label</td> </tr> </table> </div> </div> </div> <div class="dataGrid_container"> <table class="dataGrid" width="100%" cellpadding="0" cellspacing="0"> <tr class="dataAlterRw1"> <td class="dataGridHdr_boder">Lorem ipsum dolor sit amet, consectetur</td> <td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td> <td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">60%</td> <td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td> </tr> <tr class="dataAlterRw2"> <td class="dataGridHdr_boder">Lorem ipsum dolor sit amet</td> <td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td> <td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">10%</td> <td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td> </tr> <tr class="dataAlterRw1"> <td class="dataGridHdr_boder">Lorem ipsum dolor sit </td> <td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td> <td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">20%</td> <td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td> </tr> <tr class="dataAlterRw2"> <td class="dataGridHdr_boder" >Lorem ipsum dolor sit amet, consectetur</td> <td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td> <td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">30%</td> <td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td> </tr> </table> </div> </div> </div> <div style="height:5px;"></div> <div class="expand"><a title="expand/collapse" href="#" style="display: block;">Title for the Second Heading</a></div> <div class="collapse"> <div class="accCntnt"> <p style="font-weight:normal; color:#333;"> 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. </p> </div> </div> <div style="height:5px;"></div> <div class="expand"><a title="expand/collapse" href="#" style="display: block;">Title for the Third Heading</a></div> <div class="collapse"> <div class="accCntnt"> <p style="font-weight:normal; color:#333;"> 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. </p> </div> </div> <div style="height:5px;"></div> <div class="expand"><a title="expand/collapse" href="#" style="display: block;">Back to Tutorial</a></div> <div class="collapse"> <div class="accCntnt"> <p style="font-weight:normal; color:#333;"> <div style="text-align:center;"><a href="#">Back to the Tutorial</a></div> </p> </div> </div> </div> </div> View / Download: