Horizontal Accordion script

Step 1: Insert the following code in the HEAD section of your page

Select All
<!--Make sure your page contains a valid doctype at the very top--> <link rel="stylesheet" type="text/css" href="haccordion.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="haccordion.js"> /*********************************************** * Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> <style type="text/css"> /*CSS for example Accordion #hc1*/ #hc1 li{ margin:0 3px 0 0; /*Spacing between each LI container*/ } #hc1 li .hpanel{ padding: 5px; /*Padding inside each content*/ background: lightblue; } /*CSS for example Accordion #hc2*/ #hc2 li{ margin:0 0 0 0; /*Spacing between each LI container*/ border: 12px solid black; } #hc2 li .hpanel{ padding: 5px; /*Padding inside each content*/ background: #E2E9FF; cursor: hand; cursor: pointer; } </style> <script type="text/javascript"> haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'}, selectedli: [0, true], //[selectedli_index, persiststate_bool] collapsecurrent: false //<- No comma following very last setting! }) haccordion.setup({ accordionid: 'hc2', //main accordion div id paneldimensions: {peekw:'30px', fullw:'450px', h:'150px'}, selectedli: [-1, true], //[selectedli_index, persiststate_bool] collapsecurrent: true //<- No comma following very last setting! }) </script>

The code above references 2 external .js files and an image, which you need to download below (right click/ select "Save As"):

1. haccordion.js (one variable near the top inside this file you should customize)
2. haccordion.css
3. 

By default, upload these files to the same directory as where your webpage resides.

Step 2: Insert the below sample code into the BODY section of your page:

Select All
<h2>Demo 1:</h2> <div id="hc1" class="haccordion"> <ul> <li> <div class="hpanel"> <img src="http://img502.imageshack.us/img502/746/thailand.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia. </div> </li> <li> <div class="hpanel"> <img src="http://img264.imageshack.us/img264/7199/japan.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Japan is a constitutional monarchy where the power of the Emperor is very limited. </div> </li> <li> <div class="hpanel"> <img src="http://img101.imageshack.us/img101/516/mayai.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals. </div> </li> <li> <div class="hpanel"> <img src="http://img194.imageshack.us/img194/9553/camam.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Agriculture has long been the most important sector of the Cambodian economy. </div> </li> <li> <div class="hpanel"> <img src="http://img408.imageshack.us/img408/5751/langkawi.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Langkawi is particularly known for its beaches which are among the best in Malaysia. </div> </li> </ul> </div> <p style="clear:left"><a href="javascript:haccordion.expandli('hc1', 0)">Expand 1 Panel</a> | <a href="javascript:haccordion.expandli('hc1', 1)">Expand 2nd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 2)">Expand 3rd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 3)">Expand 4th Panel</a> | <a href="javascript:haccordion.expandli('hc1', 4)">Expand 5th Panel</a></p> <br /> <h2>Demo 2:</h2> <div id="hc2" class="haccordion"> <ul> <li style="border-right-width:0"> <div class="hpanel" style="padding:10px; width:250px"> This accordion content has a custom full width of 250px. Note where the two inline CSS are added within the markup. </div> </li> <li style="border-right-width:0"> <div class="hpanel" style="padding:10px; width:180px"> This accordion content has a custom full width of 180px. Note where the two inline CSS are added within the markup. </div> </li> <li style="border-right-width:0"> <div class="hpanel" style="padding:10px; width:350px"> This accordion content has a custom full width of 350px. Note where the two inline CSS are added within the markup. </div> </li> <li> <div class="hpanel" style="padding:10px; width:550px"> This accordion content has a custom full width of 550px. Note where the two inline CSS are added within the markup. </div> </li> </ul> </div>

It contains the HTML for a sample horizontal accordion. That's it for installation!

Original code on :- www.dynamicdrive.com