How to implement Accordion Menu in

Follow the below steps to implement accordion menu style in :

1) Go to this page into it->

2) From this download ddaccordion.js file from it.

3) Then Add this ddaccordion.js file into your page directive

4) Then Copy Images For Accordion menu from this link.

5)Then Copy paste below code  into your .aspx Page.

Source Code:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”accordian menu.aspx.cs” Inherits=”accordian_menu” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “”&gt;
<html xmlns=”; xml:lang=”en”>


<script type=”text/javascript” src=””></script&gt;

<script type=”text/javascript” src=”ddaccordion.js”>

* Accordion Content script- (c) Dynamic Drive DHTML code library (
* Visit for hundreds of DHTML scripts
* This notice must stay intact for legal use


<script type=”text/javascript”>

headerclass: “silverheader”, //Shared CSS class name of headers group
contentclass: “submenu”, //Shared CSS class name of contents group
revealtype: “mouseover”, //Reveal content when user clicks or onmouseover the header? Valid value: “click”, “clickgo”, or “mouseover”
mouseoverdelay: 200, //if revealtype=”mouseover”, set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: [“”, “selected”], //Two CSS classes to be applied to the header when it’s collapsed and expanded, respectively [“class1”, “class2”]
togglehtml: [“”, “”, “”], //Additional HTML added to the header when it’s collapsed and expanded, respectively  [“position”, “html1”, “html2”] (see docs)
animatespeed: “fast”, //speed of animation: integer in milliseconds (ie: 200), or keywords “fast”, “normal”, or “slow”
oninit: function (headers, expandedindices) { //custom code to run when headers have initalized
//do nothing
onopenclose: function (header, index, state, isuseractivated) { //custom code to run whenever a header is opened or closed
//do nothing


<style type=”text/css”>

margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;

.applemenu div.silverheader a{
background: black url(images/silvergradient.gif) repeat-x center left;
font: normal 12px Tahoma, “Lucida Grande”, “Trebuchet MS”, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the “.statusicon” icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;

.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;

.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(images/silvergradientover.gif);
color: white;

.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via “mouseover” instead of “click”*/




<div><a href=””>Home</a></div&gt;
<a href=Home.aspx >Comapny Details</a><br />
<div><a href=”; >Contact Us</a></div>
Some random content here<br />
<div><a href=””>About Us</a></div>
Some random content here<br />
<div><a href=””>Log in</a></div>
Some random content here<br />
<img src=”; />
<div><a href=””>Log Out</a></div>
Some random content here<br />


thus ,u implement accordion menu..

enjoy this …..


By:Raj Pradip

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s