Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

Show and hide on the same click

Newbie
  
Join Date: Dec 2008
Posts: 2
#1: Dec 30 '08
Hello all,
New to javascript and have never worked with programming languages like c++, so my logic in some of these statements might be incorrect or redundant

Got a problem with my page...
using java and external css to show/hide items on the same click.
I found a script that uses the getElementById function to adjust the display style of a div id. I have utilized this to show four ids in the same space on my page. Some ids start with the display:none; position:absolute; inside a position relative tag so that each id shows in exactly the same spot on a centered page.
On click of button1, id "two" should show. Then on click of button2, button1text should be hidden, while button2 shows. In firefox and chrome, I was able to have the ids show on top of each other but not clear the existing data from the area. So if button4 first, then 2, 3, and 1 were clicked, you can only see the information from button 4 and will never see the info from 2,3, and 1. In IE, this information shows in a different place than in firefox or chrome.

Basically, I want only the id that is clicked to show when that button is clicked. I am having a hard time getting the other ids to hide when the other buttons are clicked. When "button1" is clicked, show "button1text" hide "button2text, button3text, button4text"

Any help is appreciated.
Thanks

Tim


Expand|Select|Wrap|Line Numbers
  1. #zero{
  2. position: relative;
  3. left:0px;
  4. top:0px;
  5. }
  6. #one,#two,#three,#four,#five {
  7.     display:none;
  8.     left:0px;
  9.     position:absolute;
  10.     width:785px;
  11.     height:330px;
  12.     overflow:scroll;
  13.     padding:10px;
  14.     background-color:#ffffff;
  15.     text-align:justify;
  16.     font-size: 12px;
  17.     font-family: Arial, Helvetica, sans-serif;
  18.     font-weight: bold;
  19. } 
  20. #six,#seven,#eight,#nine{
  21.     Width:87px;
  22.     Height:23px;
  23.     text-align:center;
  24.     font-size: 11px;
  25.     font-family: Verdana, Arial, Helvetica, sans-serif;
  26.     font-weight: bold;
  27.     position:relative;
  28.     top:4px;
  29.     vertical-align: middle;
  30.     font-style: italic;
  31. } 
  32.  
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript"> 
  2. var d=0; 
  3. var id=new Array(); 
  4. id[0]="one"; 
  5. id[1]="two"; 
  6. id[2]="three"; 
  7. id[3]="four"; 
  8. id[4]="five"; 
  9. id[5]="ten"
  10. function displayButton1() { 
  11. if(document.getElementById(id[1]).style.display=="") { 
  12. document.getElementById(id[1]).style.display=""; 
  13. document.getElementById(id[1]).style.display="block"; 
  14. document.getElementById(id[5]).style.display="none";
  15. if(d>5) { 
  16. document.getElementById(id[1]).style.display="";
  17. document.getElementById(id[4]).style.display="none";
  18. document.getElementById(id[2]).style.display="none";
  19. document.getElementById(id[3]).style.display="none";
  20. } }
  21. else { 
  22. document.getElementById(id[1]).style.display="";
  23. document.getElementById(id[5]).style.display="" ;
  24. document.getElementById(id[4]).style.display="none";
  25. document.getElementById(id[2]).style.display="none";
  26. document.getElementById(id[3]).style.display="none";
  27. } d=1; if(d=1) { 
  28. d=5; } } 
  29. function displayButton2() { 
  30. if(document.getElementById(id[2]).style.display=="") { 
  31. document.getElementById(id[2]).style.display=""; 
  32. document.getElementById(id[2]).style.display="block";
  33. document.getElementById(id[5]).style.display="none"; 
  34. if(d>5) { 
  35. document.getElementById(id[2]).style.display=""; } }
  36. else { 
  37. document.getElementById(id[2]).style.display="";
  38. document.getElementById(id[5]).style.display="" ;
  39. document.getElementById(id[4]).style.display="none";
  40. document.getElementById(id[3]).style.display="none";
  41. document.getElementById(id[1]).style.display="none";
  42. } d=2; if(d=2) { 
  43. d=5; } 
  44. }
  45. function displayButton3() { 
  46. if(document.getElementById(id[3]).style.display=="") { 
  47. document.getElementById(id[3]).style.display=""; 
  48. document.getElementById(id[3]).style.display="block"; 
  49. document.getElementById(id[5]).style.display="none";
  50. if(d>5) {
  51. document.getElementById(id[3]).style.display=""; } } 
  52. else { 
  53. document.getElementById(id[3]).style.display="";
  54. document.getElementById(id[5]).style.display="" ;
  55. document.getElementById(id[4]).style.display="none";
  56. document.getElementById(id[2]).style.display="none";
  57. document.getElementById(id[1]).style.display="none";}
  58. d=3; if(d=3) { 
  59. d=5; } } 
  60. function displayButton4() { 
  61. if(document.getElementById(id[4]).style.display=="") {
  62. document.getElementById(id[4]).style.display=""; 
  63. document.getElementById(id[4]).style.display="block";
  64. document.getElementById(id[5]).style.display="none";
  65. if(d>5) {
  66. document.getElementById(id[4]).style.display=""; 
  67. } } 
  68. else { 
  69. document.getElementById(id[4]).style.display="";
  70. document.getElementById(id[5]).style.display="" ;
  71. document.getElementById(id[3]).style.display="none";
  72. document.getElementById(id[2]).style.display="none";
  73. document.getElementById(id[1]).style.display="none";} 
  74. d=4; if(d=4) { 
  75. d=5; } }
  76. </script>
  77. <body>
  78. <table>
  79. <tr>
  80. <TD width="87" valign="middle" onMouseOver="style.cursor='pointer'"><div id="six" onclick="displayButton1();">button1</div></TD>
  81. <TD width="87" valign="middle" onMouseOver="style.cursor='pointer'" ><div id="seven" onClick="displayButton2();">button2</div></TD>
  82. <TD width="87" valign="middle" onMouseOver="style.cursor='pointer'"><div id="eight" onClick="displayButton3();">button3</div></TD>
  83. <TD width="87" valign="middle" onMouseOver="style.cursor='pointer'"><div id="nine" onClick="displayButton4();">button4</div></TD>
  84. </tr>
  85. <tr>
  86. <td><div id="zero"
  87. <div id="two" >button1 text</div>
  88. <div id="three" >button2 text</div>
  89. <div id="four" >button3 text</div>
  90. <div id="five" >button4 text</div>
  91. <div id="ten" >&nbsp</div></div>
  92. </td>
  93. </tr>
  94. </table>
  95.  
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Dec 31 '08

re: Show and hide on the same click

Instead of all that code, create one function and pass the number as a parameter, e.g.
Expand|Select|Wrap|Line Numbers
  1. function displayButton(num) {
  2.     if (document.getElementById(id[num]).style.display=="") { 
  3.         document.getElementById(id[num]).style.display="block"; 
  4. ...
Newbie
  
Join Date: Dec 2008
Posts: 2
#3: Dec 31 '08

re: Show and hide on the same click

I took out some code, but the individual buttons do not close the other divs. The idea is that when button1 is clicked, if button2 text, button3 text, or button4 text is open, they close. With my current version, when button 4 text is open, you can click button1 all you want and it will not display because button4 text is open. I need button1 to close button4.
Newbie
  
Join Date: Jan 2008
Posts: 15
#4: Jan 1 '09

re: Show and hide on the same click

Expand|Select|Wrap|Line Numbers
  1. function displayButton(num) {
  2.     //first, hide all of the other stuff (actually, just hide everything, it's far easier)
  3.     for(id_to_hide in id)//cycle through all of the elements in the 'id' array
  4.         document.getElementById(id_to_hide).style.display = 'none';
  5.     //and now unhide the one that you want to be visible
  6.     document.getElementById(id[num]).style.display="block"; 
  7. }
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,295 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved