Create a Accordion Effect

Jquery Examples, Other Add comments | 541 views |

Description:

This tutorial I’ll explain a simple step-by-step way to implement an Accordion Effect Demo with cool sliding and animated effects using Prototype, Scriptaculous and CSS.
The result is something like this:

Demo

Script Code

Step 1: Insert the below into the <HEAD> section of your page: (Select to copy)
<link rel="stylesheet" type="text/css" href="css/css.css" /> <script type="text/javascript" src="js/prototype.js"></script><br /> <script type="text/javascript" src="js/scriptaculous.js"></script><br /> <script type="text/javascript" src="js/accordion.js"></script>

The above references an jquery.js file. Download (by right clicking, and selecting “Save As”),

and upload to your webpage directory. Within the above code

CSS Code:

Step 2: Insert the below into the <HEAD> section of your page: (Select to copy)
body { background-color:#b0f881; padding:20px; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:18px;}<br /> div#test-accordion{ border: 1px solid #1d5503; background-color:#1d5503; padding:1px;}div.accordion { position: relative; /* required for bounding */ width:550px;}div.accordion-toggle{ position: relative; /* required for effect */ z-index: 10; /* required for effect */ background: #333;<br /> background-image:url(../img/off.gif); background-repeat:repeat-x; background-position:bottom; font-weight:bold;color:#ffffff; cursor: pointer; margin-bottom:1px; padding:0px 14px 6px 14px; border-top:1px solid #333; }div.accordion-toggle:hover, div.accordion-toggle-active{ background-image:url(../img/on.jpg); background-color:#333; border-top:1px solid #333;}div.accordion-content{ overflow: hidden; /* required for effect */ background: #fff; padding:9px 24px 6px 24px; color:#000; border-bottom:1px solid #000000;}</p> <p>

HTML Code:

Step 3: Insert the below into the <BODY> section of your page: (Select to copy)
<div id="test-accordion" class="accordion"> <div class="accordion-toggle">First Step</div> <div class="accordion-content"> <p> When adding a color to your webpage with HTML, sometimes you can just type in the name of the color. But more often than not, you’ll need to use what’s called the hex code, which is something that the browser will be able to understand. Choose a color from the list below and look to its left to get the hex code. If you wanted your background to be red, for example, you’d type bgcolor=”#CC3300?. </p> <p> <p style="padding-left:60px">See More examples: <a href="http://www.csscody.com" title="CSS Experiments">www.csscody.com</a></p> </p></div> <div class="accordion-toggle">Second Step</div> <div class="accordion-content"> <p> When adding a color to your webpage with HTML, sometimes you can just type in the name of the color. But more often than not, you’ll need to use what’s called the hex code, which is something that the browser will be able to understand. Choose a color from the list below and look to its left to get the hex code. If you wanted your background to be red, for example, you’d type </p> <p> <p style="padding-left:60px">See More examples: <a href="http://www.csscody.com" title="CSS Experiments">www.csscody.com</a></p> </p></div> <div class="accordion-toggle">Third Step</div> <div class="accordion-content"> <p> IWhen adding a color to your webpage with HTML, sometimes you can just type in the name of the color. But more often than not, you’ll need to use what’s called the hex code, which is something that the browser will be able to understand. Choose a color from the list below and look to its left to get the hex code. If you wanted your background to be red, for example, you’d type <p style="padding-left:60px">See More examples: <a href="http://www.csscody.com" title="CSS Experiments">www.csscody.com</a></p> </p></div> <div class="accordion-toggle">Forth Step</div> <div class="accordion-content"> <p> NWhen adding a color to your webpage with HTML, sometimes you can just type in the name of the color. But more often than not, you’ll need to use what’s called the hex code, which is something that the browser will be able to understand. Choose a color from the list below and look to its left to get the hex code. If you wanted your background to be red, for example, <p style="padding-left:60px">See More examples: <a href="http://www.csscody.com" title="CSS Experiments">www.csscody.com</a></p> </p></div> </div> <p>

Got a question or need help customizing this Jquery code? Post it in the help me. If you have a comment or suggestion instead, post it in the comments section below.