How to create a DHTML expandable lists.

Try the following example:

PLAIN TEXT
CODE:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. <title></title>
  5. </meta><meta name="description" content="">
  6. </meta><meta name="keywords" content="">
  7.  
  8. <style>
  9. .general {font-family:Verdana;font-size:11;color:white}
  10. .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}
  11. </style>
  12.  
  13. <script>
  14.  
  15. function objectOver(x){
  16. x.style.color="#9ff5ff";
  17. }
  18.  
  19. function objectOut(x){
  20. x.style.color="white";
  21. }
  22.  
  23. function collapse(x){
  24. var oTemp=eval("document.all.text_"+x);
  25. var oClick=eval("document.all.click_"+x);
  26.  
  27.       if(oTemp.style.display=="block"){
  28.             oTemp.style.display="none";
  29.             oClick.innerHTML="+";
  30.       }
  31.       else{
  32.             oTemp.style.display="block";
  33.             oClick.innerHTML="-";
  34.       }
  35. }
  36. </script>
  37.  
  38. </meta></head>
  39. <body bgcolor=#224452>
  40.  
  41. <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>
  42.  
  43. <div style="margin-left:100;display:block" class=general>
  44. Text 1 TITLE
  45. </div><br />
  46. <div id=text_1 style="margin-left:100" class=general>
  47. text that is displayed under Text 1 TITLE<br />
  48. another line of text here<br />
  49. </div>
  50.  
  51. <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>
  52. <div style="margin-left:200;display:block" class=general>
  53. Text 1_1 TITLE
  54. </div><br />
  55. <div id=text_1_1 style="margin-left:200" class=general>
  56. Text under Text 1_1 TITLE catagory<br />
  57. </div>
  58.  
  59.  
  60. <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>
  61. <div style="margin-left:200;display:block" class=general>
  62. Text 1_2 TITLE
  63. </div><br />
  64. <div id=text_1_2 style="margin-left:200" class=general>
  65. This is a test of the emergency broadcasting system.<br />
  66. </div>
  67.  
  68. <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>
  69. <div style="margin-left:300;display:block" class=general>
  70. Text 1_2_1 TITLE
  71. </div><br />
  72. <div id=text_1_2_1 style="margin-left:300;display:block" class=general>
  73. If there were a real emergency and you thought someone would care this <br />
  74. information would be classified and you wouldn't know anyhows<br />
  75. </div>
  79. <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>
  80. <div style="margin-left:200;display:block" class=general>
  81. Text 1_3 TITLE
  82. </div><br />
  83. <div id=text_1_3 style="margin-left:200" class=general>
  84. Example for 1_3 text area...<br />
  85. Notice in the code that the breaks all have a trailing slash....thus closing the br tag<br />
  86. I'm trying to remember to use correct syntax before something breaks it.
  87. </div>
  88.  
  89. </body>
  90. </html>