Forum:

HTML Pages with CSS and JavaScript

Accordion-Default value

Ranch Hand

Posts: 37

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Thanks & Regards,
Author

Aditi Gandy

Ranch Hand

Posts: 37

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Any one Please help me!

Regards,
Author

Thanks & Regards,
Author

K West

Ranch Hand

Posts: 58

I like...

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Aditi,

This should work

Years teach us more than books.

Brian Legg

Ranch Hand

Posts: 488

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

SCJA
~Currently preparing for SCJP6

Aditi Gandy

Ranch Hand

Posts: 37

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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,

Thanks & Regards,
Author

K West

Ranch Hand

Posts: 58

I like...

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Years teach us more than books.

She'll be back. I'm just gonna wait here. With this tiny ad:

We need your help - Coderanch server fundraiser

https://coderanch.com/wiki/782867/Coderanch-server-fundraiser