By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,474 Members | 1,270 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,474 IT Pros & Developers. It's quick & easy.

How to make DIV tags to expand and collapse

P: 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
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
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

P: 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
Expert Mod 15k+
P: 16,027
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.