Create a Accordion Effect

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” mce_href=”css/css.css” /> <mce:script type=”text/javascript” mce_src=”js/prototype.js”></mce:script><br /> <mce:script type=”text/javascript” mce_src=”js/scriptaculous.js”></mce:script><br /> <mce:script type=”text/javascript” mce_src=”js/accordion.js”></mce: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” mce_style=”padding-left: 60px;”>See More examples: <a href=”http://www.csscody.com” mce_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” mce_style=”padding-left: 60px;”>See More examples: <a href=”http://www.csscody.com” mce_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” mce_style=”padding-left: 60px;”>See More examples: <a href=”http://www.csscody.com” mce_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” mce_style=”padding-left: 60px;”>See More examples: <a href=”http://www.csscody.com” mce_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.

Tags: Accordion Effect, CSS, Prototype, Scriptaculous

This entry was posted on Monday, February 9th, 2009 at 8:33 pm and is filed under Jquery Examples. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback.

{ 12 comments to read ... please submit one more! }

sohbet

July 6, 2009 at 2:45 pm

thanks admin good post

Reply
Samson Delila

June 10, 2010 at 7:15 am

Wow! Nice tuts for accordion JQuery..
I’ll use this trick for my web ..
Thanks for share this !

Reply
online iq test

July 29, 2010 at 8:19 am

hi This is a nice information ! thanks

Reply
winrar free download full version

April 13, 2011 at 8:12 am

You have undoubtedly first been rather demanding remarkable moving up this skill great weblog, Finally it was real fascinating that you can examine. Can’t just to determine anything you contented inside the subsequent last seven days. Hello for your huge perks, so far, I have ever found really compassionate such internet site , and as well, reason for optimism might, as well as the great reviews the most pop other people showed, probably will assist that you decide in cases where it is usually the proper choice for you. Could be the most effective aspect.

Reply