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

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > javascript / ajax / dhtml > questions > how to make div tags to expand and collapse
+ 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. { 
  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
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. { 
  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
P: 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
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.

Question stats

  • viewed: 3850
  • replies: 3
  • date asked: Nov 24 '07
BYTES.COM © 2020 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | JavaScript / Ajax / DHTML Answers Sitemap | JavaScript / Ajax / DHTML Insights Sitemap

Follow us to get the Latest Bytes Updates