×
Home About Us Products Services News Free Scripts Contact
news php scripts and software

JavaScript & DHTML example - How to create a DHTML expandable list (works only in Internet Explorer)?


JavaScript & DHTML - How to create a DHTML expandable list (works only in Internet Explorer)?

<style>
.general {font-family:Verdana;font-size:11;color:white}
.span_general {font-family:Verdana;font-size:9;color:white;border-style:solid;border-color:white;border-width:1px 1px 1px 1px;text-align:center;width:16;height:15;cursor:hand}
</style>

<script>

function objectOver(x)

{

   x.style.color="#9ff5ff";
}

function objectOut(x)

{

   x.style.color="white";
}

function collapse(x)

{

   var oTemp=eval("document.all.text_"+x);
   var oClick=eval("document.all.click_"+x);
   oTemp.style.display="none";
   oClick.innerHTML="+"

}

else

 {
	
   oTemp.style.display="block";
   oClick.innerHTML="-";
	
 }

}


</script>

</head>
<body bgcolor=#224452>

<div id=click_1 class=span_general onclick=javascript:collapse('1') onmouseover=javascript:objectOver(this) onmouseout=javascript:objectOut(this) style="margin-left:100;position:relative;left:-25;top:14" > - </div>

<div  style="margin-left:100;display:block" class=general>
Text 1 TITLE bla bla
</div><br>
<div id=text_1 style="margin-left:100" class=general>
teddfg ejwrhtwjkerhtjwekrhtwjlerht bn sadfbasdnfb asdfnbm asdfnb<br>
sadfasdf wert ewrtrty rety yturtu<br>
asfsdfsda rtuytyurtyu jghmkjmglkhjmkghm gfhj ghj
</div>

<div id=click_1_1 class=span_general onclick=javascript:collapse('1_1') onmouseover=javascript:objectOver(this) onmouseout=javascript:objectOut(this) style="margin-left:200;position:relative;left:-25;top:14" > - </div>
<div  style="margin-left:200;display:block" class=general>
Text 1_1 TITLE bla bla
</div><br>
<div id=text_1_1 style="margin-left:200" class=general>
teddfg ejwrhtwjkerhtjwekrhtwjlerht bn sadfbasdnfb asdfnbm asdfnb<br>
sadfasdf wert ewrtrty rety yturtu<br>
asfsdfsda rtuytyurtyu jghmkjmglkhjmkghm gfhj ghj
</div>


<div id=click_1_2 class=span_general onclick=javascript:collapse('1_2') onmouseover=javascript:objectOver(this) onmouseout=javascript:objectOut(this) style="margin-left:200;position:relative;left:-25;top:14" > - </div>
<div  style="margin-left:200;display:block" class=general>
Text 1_2 TITLE bla bla
</div><br>
<div id=text_1_2 style="margin-left:200" class=general>
teddfg ejwrhtwjkerhtjwekrhtwjlerht bn sadfbasdnfb asdfnbm asdfnb<br>
sadfasdf wert ewrtrty rety yturtu<br>
asfsdfsda rtuytyurtyu jghmkjmglkhjmkghm gfhj ghj
</div>

<div id=click_1_2_1 class=span_general onclick=javascript:collapse('1_2_1') onmouseover=javascript:objectOver(this) onmouseout=javascript:objectOut(this) style="margin-left:300;position:relative;left:-25;top:14" > - </div>
<div  style="margin-left:300;display:block" class=general>
Text 1_2_1 TITLE bla bla
</div><br>
<div id=text_1_2_1 style="margin-left:300;display:block" class=general>

teddfg ejwrhtwjkerhtjwekrhtwjlerht bn sadfbasdnfb asdfnbm asdfnb<br>
sadfasdf wert ewrtrty rety yturtu<br>
asfsdfsda rtuytyurtyu jghmkjmglkhjmkghm gfhj ghj
</div>



<div id=click_1_3 class=span_general onclick=javascript:collapse('1_3') onmouseover=javascript:objectOver(this) onmouseout=javascript:objectOut(this) style="margin-left:200;position:relative;left:-25;top:14" > - </div>
<div  style="margin-left:200;display:block" class=general>
Text 1_3 TITLE bla bla
</div><br>
<div id=text_1_3 style="margin-left:200" class=general>

teddfg ejwrhtwjkerhtjwekrhtwjlerht bn sadfbasdnfb asdfnbm asdfnb<br>
sadfasdf wert ewrtrty rety yturtu<br>
asfsdfsda rtuytyurtyu jghmkjmglkhjmkghm gfhj ghj
</div>

Category: JavaScript & DHTML

 
<< Go back