Accordion-Default value

Hi, I am developing a collapsable and expandable accordion in my page. I have the complete code, but, by default, i want that accodion to be in closed form. can any one please help me? Only when i click on description, it should open up another <div> to show the description.. can anyone tell me how to do it?

First.html

Java Script code

slider.prototype.pro=function(d){
		for(var i=0;i<this.l;i++){
			var h=this.arr[i], s=h.nextSibling; 
			s=s.nodeType!=1?s.nextSibling:s; 
			clearInterval(s.tm);
			if(h==d&&s.style.display=='none'){
				s.style.display=''; su(s,1); 
				h.className=this.sl
			}
			else if(s.style.display==''){
				su(s,-1);
				h.className=''
			}
		}//end of for
	}//end of slider.prototype.pro

Now comes the .css code

* {margin:0; padding:0}

#description{
	width:580px; 
	padding:10x 0x 0x 0x;
	border: 1px solid #9ac1c9;/*Big border with large width*/
	text-align: left;
	font-weight: bold;
	position:absolute;
	float:right;
	top:-60px;
	
 }

#accordion2 {
	width:259px; 
	margin:5px auto;
	font:12px Verdana,Arial;
	color:#990000;
	border:0px solid #333;
	border-top:none
}

.accordion2 {
	width:259px;
	 padding: 2x 2x 2x 10x;
}

.accordion2 dt {
	width:247px;
	padding:4px 6px;
	font-weight:bold;
	cursor:pointer;
	background-color:#ACACAC; /*Description -background*/
	background-image:url(images/arrow_down.gif);
	background-position:right center;
	background-repeat:no-repeat;
	color:black;/*Description -font color*/
	border-top:1px solid black;
	border-right:1px solid black;
	border-bottom:1px solid black;
	border-left:1px solid black;
}

.accordion2 dt:hover {
	background-color:#555
	}
	
.accordion2 .open {
	background-color:#444; 
	background-image:url(images/arrow_up.gif)
	}
	
.accordion2 dd {
	overflow:hidden;
	background:#4000C0;
	color:#FFFF00
}

.accordion2 span {
	display:block;
	width:229px;
	border-top:none;
	padding:15px
}

Please help

Any one Please help me!

Regards,
Author

Hi Aditi,

This should work

What K West said, and onClick description change the visibility.

Brian Legg wrote:What K West said, and onClick description change the visibility.

I have tried both the suggessions. If I do display "none", it will not display onClick also....

i tried with changing onClick description, it is also not working.....there should be some simple solution for it.....i am not able to figure it.

please help.

Regards,

You have to only make the display:none, do nothing else, rest of the functionality and code remains the same.

Just use this, It works for me

<html>   
<head>   
    <title>Description</title>   
    <script type="text/javascript" src="Accordion.js"></script>   
    <link rel="stylesheet" href="Accordion.css" type="text/css" />   
    <script>   
        var divDisplayed;   
        function detailDisplay(id){   
            if(divDisplayed != null){   
                divDisplayed.style.visibility ='hidden';   
            }   
            h = document.getElementById(id);   
            divDisplayed=h;   
            h.style.visibility = 'visible';   
        }   
    </script>   
</head>   
<body bgcolor="#595959">    
  
  
<div id="First">   
       
<div id="accordion2">   
    <dl class="accordion2" id="slider2">   
        <dt>Description</dt>   
        <dd style="display:none">  
            <span>esdgryrtyghyiyuyhgjhuyj </span>   
        </dd>   
           
    </dl>   
</div>   
</div>   
  
  
<script type="text/javascript">   
  
var slider2=new accordion.slider("slider2");   
slider2.init("slider2",0,"open");   
  
</script>   
  
</body>   
</html>

All the Best