470,831 Members | 1,310 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

home > topics > javascript > questions > how to make div tags to expand and collapse

Post your question to a community of 470,831 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. { 
  6. var layer = new Object(); 
  7. layer = document.getElementById(layerid); 
  8. var visible = layer.style.visibility != "hidden" 
  9.  
  10.  
  11.         if(visible){ 
  12.                 layer.style.visibility = "hidden"; 
  13.         }else{ 
  14.                 layer.style.visibility = "visible"; 
  15.         } 
  16.  
  17.  
  18.  
  19. }//end hideLayer 
  20.  
  21.  
  22. function hideLayer2(layerid) 
  23. { 
  24. var layer = new Object(); 
  25. layer = document.getElementById(layerid); 
  26. var visible = layer.style.visibility != "hidden" 
  27.  
  28.         if(visible){ 
  29.                 layer.style.visibility = "hidden"; 
  30.         }else{ 
  31.                 layer.style.visibility = "visible"; 
  32.         } 
  33.  
  34.  
  35.  
  36. }//end hideLayer 
  37.  
  38.  
  39.     // --> 
  40.     </script> 
  41.  
  42. <title>Untitled Document</title> 
  43. </head> 
  44.  
  45.  
  46. <body> 
  47. <div id="answer1bg" 
  48.                style="position:absolute; 
  49.                       left:311px; 
  50.                       top:146px; 
  51.                       width:472px; 
  52.                       height:143px; 
  53.                       z-index:1; 
  54.   background-color: #004A80; 
  55.                       visibility:visible"></div> 
  56. <div id="answer1text" 
  57.                       style="position:absolute; 
  58.   font-family:Arial, Helvetica, sans-serif; 
  59.   font-size:14pt; 
  60.                       left:325px; 
  61.                       top:152px; 
  62.                       width:452px; 
  63.                       height:46px; 
  64.                       z-index:2; 
  65.                       visibility:visible; 
  66.   color: #FFFFFF">The  is a charitable organization mainly funded 
  67. by . 
  68. This enables  to have one full time member of staff (Manager). 
  69. Project funding has been secured to employ additional paid staff for 
  70. specialist services e.g. </div> 
  71.  
  72.  
  73. <div id="topbg" 
  74.                style="position:absolute; 
  75.                       left:311px; 
  76.                       top:115px; 
  77.                       width:472px; 
  78.                       height:46px; 
  79.                       z-index:2; 
  80.                       visibility:visible"><img src="images/new/ 
  81. top.gif" /></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.                       visibility:visible"></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.                       visibility:visible; 
  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.                       visibility:visible"><img src="images/new/ 
  133. newtop.gif" /></div> 
  134.  
  135.  
  136. <div id="question2" 
  137.                style="position:absolute; 
  138.    font-family:Arial, Helvetica, sans-serif; 
  139.    font-size:14pt; 
  140.    font-weight:400; 
  141.                       left:449px; 
  142.                       top:296px; 
  143.                       width:196px; 
  144.                       height:24px; 
  145.                       z-index:2; 
  146.   color: #004A80; 
  147.                       visibility:visible"> 
  148.   <a href="#" 
  149. onClick="hideLayer('answer2text');hideLayer('answer2bg');">What is 
  150. all about?</a></div> 
  151.  
  152.  
  153. </body> 
  154.  

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

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

Follow us! Get the Latest Bytes Updates
By using this site, you agree to our Privacy Policy and Terms of Use.