468,243 Members | 1,852 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,243 developers. It's quick & easy.

How to make DIV tags to expand and collapse

37
Hi
I am currently trying to create a FAQ webpage.
At the moment the code I have lets me click on the Questions which
successfully shows and hides the <DIV> tags containing the Answers.
But what I would like is to have the answers also collapse and
expland, similar to the small plus and minus signs in Window Explorer.
I'm sure it can be done using the CSS rules display: block; and
display: none
but I'm not sure how to implement it with my current Javascript.

This is the code I am trying to use:

Expand|Select|Wrap|Line Numbers
  1. <script language = "JavaScript 2.1" 
  2.             type = "text/javascript"> 
  3.     <!-- 
  4.   function hideLayer(layerid) 
  5. var layer = new Object(); 
  6. layer = document.getElementById(layerid); 
  7. var visible = layer.style.visibility != "hidden" 
  8.  
  9.  
  10.         if(visible){ 
  11.                 layer.style.visibility = "hidden"; 
  12.         }else{ 
  13.                 layer.style.visibility = "visible"; 
  14.         } 
  15.  
  16.  
  17.  
  18. }//end hideLayer 
  19.  
  20.  
  21. function hideLayer2(layerid) 
  22. var layer = new Object(); 
  23. layer = document.getElementById(layerid); 
  24. var visible = layer.style.visibility != "hidden" 
  25.  
  26.         if(visible){ 
  27.                 layer.style.visibility = "hidden"; 
  28.         }else{ 
  29.                 layer.style.visibility = "visible"; 
  30.         } 
  31.  
  32.  
  33.  
  34. }//end hideLayer 
  35.  
  36.  
  37.     // --> 
  38.     </script> 
  39.  
  40. <title>Untitled Document</title> 
  41. </head> 
  42.  
  43.  
  44. <body> 
  45. <div id="answer1bg" 
  46.                style="position:absolute; 
  47.                       left:311px; 
  48.                       top:146px; 
  49.                       width:472px; 
  50.                       height:143px; 
  51.                       z-index:1; 
  52.   background-color: #004A80; 
  53.                       visibility:visible"></div> 
  54. <div id="answer1text" 
  55.                       style="position:absolute; 
  56.   font-family:Arial, Helvetica, sans-serif; 
  57.   font-size:14pt; 
  58.                       left:325px; 
  59.                       top:152px; 
  60.                       width:452px; 
  61.                       height:46px; 
  62.                       z-index:2; 
  63.                       visibility:visible; 
  64.   color: #FFFFFF">The  is a charitable organization mainly funded 
  65. by . 
  66. This enables  to have one full time member of staff (Manager). 
  67. Project funding has been secured to employ additional paid staff for 
  68. specialist services e.g. </div> 
  69.  
  70.  
  71. <div id="topbg" 
  72.                style="position:absolute; 
  73.                       left:311px; 
  74.                       top:115px; 
  75.                       width:472px; 
  76.                       height:46px; 
  77.                       z-index:2; 
  78.                       visibility:visible"><img src="images/new/ 
  79. top.gif" /></div> 
  80.  
  81.  
  82. <div id="question1" 
  83.                style="position:absolute; 
  84.    font-family:Arial, Helvetica, sans-serif; 
  85.    font-size:14pt; 
  86.    font-weight:400; 
  87.                       left:449px; 
  88.                       top:126px; 
  89.                       width:140px; 
  90.                       height:24px; 
  91.                       z-index:2; 
  92.   color: #004A80; 
  93.                       visibility:visible"> 
  94.   <a href="#" 
  95. onClick="hideLayer('answer1text');hideLayer('answer1bg');">How Is 
  96. Funded?</a></div> 
  97.  
  98.  
  99. <div id="answer2bg" 
  100.                style="position:absolute; 
  101.                       left:311px; 
  102.                       top:317px; 
  103.                       width:472px; 
  104.                       height:143px; 
  105.                       z-index:1; 
  106.   background-color: #004A80; 
  107.                       visibility:visible"></div> 
  108. <div id="answer2text" 
  109.                       style="position:absolute; 
  110.   font-family:Arial, Helvetica, sans-serif; 
  111.   font-size:14pt; 
  112.                       left:325px; 
  113.                       top:326px; 
  114.                       width:452px; 
  115.                       height:46px; 
  116.                       z-index:2; 
  117.                       visibility:visible; 
  118.   color: #FFFFFF">The is an independent organisation committed to 
  119. providing advice on a wide range of subjects to people, irrespective 
  120. of their status.</div> 
  121.  
  122.  
  123. <div id="topbg2" 
  124.                style="position:absolute; 
  125.                       left:311px; 
  126.                       top:289px; 
  127.                       width:472px; 
  128.                       height:28px; 
  129.                       z-index:2; 
  130.                       visibility:visible"><img src="images/new/ 
  131. newtop.gif" /></div> 
  132.  
  133.  
  134. <div id="question2" 
  135.                style="position:absolute; 
  136.    font-family:Arial, Helvetica, sans-serif; 
  137.    font-size:14pt; 
  138.    font-weight:400; 
  139.                       left:449px; 
  140.                       top:296px; 
  141.                       width:196px; 
  142.                       height:24px; 
  143.                       z-index:2; 
  144.   color: #004A80; 
  145.                       visibility:visible"> 
  146.   <a href="#" 
  147. onClick="hideLayer('answer2text');hideLayer('answer2bg');">What is 
  148. all about?</a></div> 
  149.  
  150.  
  151. </body> 
  152.  

Any help would be welcome!
Nov 24 '07 #1
3 3896
acoder
16,027 Expert Mod 8TB
Welcome to TSDN!

Change hideLayer() to:
Expand|Select|Wrap|Line Numbers
  1. function hideLayer(layerid) 
  2.   var layer = document.getElementById(layerid); 
  3.   var displayed = layer.style.display != "none";
  4.   if (displayed) {
  5.     layer.style.display = "none"; 
  6.   } else {
  7.       layer.style.display = "block";
  8.     }
  9. }//end hideLayer 
  10.  
Also replace "visibility:visible" with "display:block".
Nov 26 '07 #2
Max58kl
37
Welcome to TSDN!

Change hideLayer() to:
Expand|Select|Wrap|Line Numbers
  1. function hideLayer(layerid) 
  2.   var layer = document.getElementById(layerid); 
  3.   var displayed = layer.style.display != "none";
  4.   if (displayed) {
  5.     layer.style.display = "none"; 
  6.   } else {
  7.       layer.style.display = "block";
  8.     }
  9. }//end hideLayer 
  10.  
Also replace "visibility:visible" with "display:block".





Hi
Thanks for the help!
The divs still show and hide as before but they still do not expand and collapse!
The idea is to have the second question move up the page when the first answer is hiden and then move down the page when the first answer is shown.

I have included the code with the changes.
Any further help would be welcome!

Regards Michael

Expand|Select|Wrap|Line Numbers
  1.  
  2.  <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <script language = "JavaScript 2.1" 
  5.             type = "text/javascript"> 
  6.     <!-- 
  7.   function hideLayer(layerid) 
  8. var layer = new Object(); 
  9. layer = document.getElementById(layerid); 
  10. var visible = layer.style.display != "none" 
  11.  
  12.  
  13.         if(visible){ 
  14.                 layer.style.display = "none"; 
  15.         }else{ 
  16.                 layer.style.display = "block"; 
  17.         } 
  18.  
  19.  
  20.  
  21. }//end hideLayer 
  22.  
  23.  
  24. function hideLayer2(layerid) 
  25. var layer = new Object(); 
  26. layer = document.getElementById(layerid); 
  27. var visible = layer.style.display != "none" 
  28.  
  29.         if(visible){ 
  30.                 layer.style.display = "none"; 
  31.         }else{ 
  32.                 layer.style.display = "block"; 
  33.         } 
  34.  
  35.  
  36.  
  37. }//end hideLayer 
  38.  
  39.  
  40.     // --> 
  41.     </script> 
  42.  
  43. <title>Untitled Document</title> 
  44. </head> 
  45.  
  46.  
  47. <body> 
  48. <div id="answer1bg" 
  49.                style="position:absolute; 
  50.                       left:311px; 
  51.                       top:146px; 
  52.                       width:472px; 
  53.                       height:143px; 
  54.                       z-index:1; 
  55.   background-color: #004A80; 
  56.                       display:block"></div> 
  57. <div id="answer1text" 
  58.                       style="position:absolute; 
  59.   font-family:Arial, Helvetica, sans-serif; 
  60.   font-size:14pt; 
  61.                       left:325px; 
  62.                       top:152px; 
  63.                       width:452px; 
  64.                       height:46px; 
  65.                       z-index:2; 
  66.                       display:block; 
  67.   color: #FFFFFF">The  is a charitable organization mainly funded 
  68. by . 
  69. This enables  to have one full time member of staff (Manager). 
  70. Project funding has been secured to employ additional paid staff for 
  71. specialist services e.g. </div> 
  72.  
  73.  
  74. <div id="topbg" 
  75.                style="position:absolute; 
  76.                       left:311px; 
  77.                       top:115px; 
  78.                       width:472px; 
  79.                       height:46px; 
  80.                       z-index:2; 
  81.                       visibility:visible"><img src="images/new/top.gif" width="472" height="31" /></div> 
  82.  
  83.  
  84. <div id="question1" 
  85.                style="position:absolute; 
  86.    font-family:Arial, Helvetica, sans-serif; 
  87.    font-size:14pt; 
  88.    font-weight:400; 
  89.                       left:449px; 
  90.                       top:126px; 
  91.                       width:140px; 
  92.                       height:24px; 
  93.                       z-index:2; 
  94.   color: #004A80; 
  95.                       visibility:visible"> 
  96.   <a href="#" 
  97. onClick="hideLayer('answer1text');hideLayer('answer1bg');">How Is 
  98. Funded?</a></div> 
  99.  
  100.  
  101. <div id="answer2bg" 
  102.                style="position:absolute; 
  103.                       left:311px; 
  104.                       top:317px; 
  105.                       width:472px; 
  106.                       height:143px; 
  107.                       z-index:1; 
  108.   background-color: #004A80; 
  109.                       display:block"></div> 
  110. <div id="answer2text" 
  111.                       style="position:absolute; 
  112.   font-family:Arial, Helvetica, sans-serif; 
  113.   font-size:14pt; 
  114.                       left:325px; 
  115.                       top:326px; 
  116.                       width:452px; 
  117.                       height:46px; 
  118.                       z-index:2; 
  119.                       display:block; 
  120.   color: #FFFFFF">The is an independent organisation committed to 
  121. providing advice on a wide range of subjects to people, irrespective 
  122. of their status.</div> 
  123.  
  124.  
  125. <div id="topbg2" 
  126.                style="position:absolute; 
  127.                       left:311px; 
  128.                       top:289px; 
  129.                       width:472px; 
  130.                       height:28px; 
  131.                       z-index:2; 
  132.                       display:block"><img src="images/new/newtop.gif" width="472" height="28" /></div> 
  133.  
  134.  
  135. <div id="question2" 
  136.                style="position:absolute; 
  137.    font-family:Arial, Helvetica, sans-serif; 
  138.    font-size:14pt; 
  139.    font-weight:400; 
  140.                       left:449px; 
  141.                       top:296px; 
  142.                       width:196px; 
  143.                       height:24px; 
  144.                       z-index:2; 
  145.   color: #004A80; 
  146.                       display:block"> 
  147.   <a href="#" 
  148. onClick="hideLayer('answer2text');hideLayer('answer2bg');">What is 
  149. all about?</a></div> 
  150.  
  151.  
  152. </body> 
  153.  
  154.  
  155.  
  156. </html>
  157.  
Nov 29 '07 #3
acoder
16,027 Expert Mod 8TB
You're using position:absolute. Try using relative positioning.
Nov 30 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by James Hurrell | last post: by
1 post views Thread by Randy Starkey | last post: by
2 posts views Thread by Jenny | last post: by
4 posts views Thread by Gönen EREN | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.