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

Show and hide on the same click

P: 2
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. #six,#seven,#eight,#nine{
  20.     Width:87px;
  21.     Height:23px;
  22.     text-align:center;
  23.     font-size: 11px;
  24.     font-family: Verdana, Arial, Helvetica, sans-serif;
  25.     font-weight: bold;
  26.     position:relative;
  27.     top:4px;
  28.     vertical-align: middle;
  29.     font-style: italic;
  30.  
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.  
Dec 30 '08 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
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. ...
Dec 31 '08 #2

P: 2
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.
Dec 31 '08 #3

P: 15
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. }
Jan 1 '09 #4

Post your reply

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