:: Show / Hide / Toggle - Multiple Divs and Buttons

:: Show / Hide / Toggle - Multiple Divs and Buttons

Hello guys, I'm starting with JavaScript / jQuery.

  2. <html>
  3.  <head>
  4.   <title> New Document </title>



  8. <style>
  9. #button01 {
  10. width:100px;
  11. height:50px;
  12. margin:10px;
  13. padding:6px 0 0 0;
  14. background-color:#f0f0f0;
  15. }

  17. #button01:hover {
  18. background-color:#ffcccc;
  19. }

  21. #button01 a {
  22. display:block;
  23. width:40px;
  24. height:40px;
  25. margin:auto;
  26. background:url("button01.png")
  27. }

  29. #button01 a:hover {
  30. width:40px;
  31. height:40px;
  32. background:url("button01-hover.png")
  33. }

  35. #hidden01 {
  36. display:none;
  37. width:300px;
  38. height:200px;
  39. margin:0 0 10px 0;
  40. border:4px solid #ffcccc;
  41. }

  43. #button02 {
  44. width:100px;
  45. height:50px;
  46. margin:10px;
  47. padding:6px 0 0 0;
  48. background-color:#f0f0f0;
  49. }

  51. #button02:hover {
  52. background-color:#cccccc;
  53. }

  55. #button02 a {
  56. display:block;
  57. width:40px;
  58. height:40px;
  59. margin:auto;
  60. background:url("button02.png")
  61. }

  63. #button02 a:hover {
  64. width:40px;
  65. height:40px;
  66. background:url("button02-hover.png")
  67. }

  69. #hidden02 {
  70. display:none;
  71. width:300px;
  72. height:200px;
  73. margin:0 0 10px 0;
  74. border:4px solid #cccccc;
  75. }
  76. </style>




  81.  </head>

  83.  <body>

  85. <script type="text/javascript">
  86. function toggle(offset){
  87.     var i, x;
  88.     var stuff = Array('hidden01', 'hidden02');  //put all the id's of the divs here in order 
  89.     for (i = 0; i < stuff.length; i++){  //hide all the divs
  90.           x = document.getElementById(stuff[i]);
  91.           x.style.display = "none";
  92.     }
  93.     // now make the target div visible
  94.     x = document.getElementById(stuff[offset]);
  95.     x.style.display = "block";
  96. window.onload = function(){toggle(0);}
  97. }
  98. </script>

  100. <div style="width:300px;">
  101. <div id="button01"><a href="#" onclick="toggle(0);return false"></a></div>


  104. <div id="button02"><a href="#" onclick="toggle(1);return false"></a></div>
  105. </div>

  107. <div id="hidden01">&nbsp;</div>
  108. <div id="hidden02">&nbsp;</div>


  111.  </body>
  112. </html>

That's working, but I want to fix 2 things:

1- Close/Hide hidden divs if I click on it's corresponding button;

2- After clicking a button, fix hover button image. If click again unfix;


Buttons examples:

button01.png



button01-hover.png



button02.png


button02-hover.png