Show / Hide / Toggle - Javascript / jQuery
<p>I'm very new with Javascript.</p>

<p>I'm trying to do something with Show/Hide functions.</p>

<p>html:</p>

<pre><code>&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt; New Document &lt;/title&gt;

&lt;style&gt;
#button01 {
 width:100px;
 height:50px;
 margin:10px;
 padding:6px 0 0 0;
 background-color:#f0f0f0;
}

#button01:hover {
 background-color:#ffcccc;
}

#button01 a {
 display:block;
 width:40px;
 height:40px;
 margin:auto;
 background:url("button01.png")
}

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

#hidden01 {
 display:none;
 width:300px;
 height:200px;
 margin:0 0 10px 0;
 border:4px solid #ffcccc;
}

#button02 {
 width:100px;
 height:50px;
 margin:10px;
 padding:6px 0 0 0;
 background-color:#f0f0f0;
}

#button02:hover {
 background-color:#cccccc;
}

#button02 a {
 display:block;
 width:40px;
 height:40px;
 margin:auto;
 background:url("button02.png")
}

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

#hidden02 {
 display:none;
 width:300px;
 height:200px;
 margin:0 0 10px 0;
 border:4px solid #cccccc;
}
&lt;/style&gt;




 &lt;/head&gt;

 &lt;body&gt;



&lt;div style="width:300px;"&gt;
&lt;div id="button01"&gt;&lt;a href="#" onclick="toggle(0);return false"&gt;&lt;/a&gt;&lt;/div&gt;


&lt;div id="button02"&gt;&lt;a href="#" onclick="toggle(1);return false"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div id="hidden01"&gt;&amp;nbsp;&lt;/div&gt;
&lt;div id="hidden02"&gt;&amp;nbsp;&lt;/div&gt;


 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>script:</p>

<pre><code>        function toggle(offset){
            var i, x;
            var stuff = Array('hidden01', 'hidden02');  //put all the id's of the divs here in order 
            for (i = 0; i &lt; stuff.length; i++){  //hide all the divs
                  x = document.getElementById(stuff[i]);
                  x.style.display = "none";
            }
            // now make the target div visible
            x = document.getElementById(stuff[offset]);
            x.style.display = "block";
         window.onload = function(){toggle(0);}
        }
</code></pre>

<p>That's working, but I want to fix 2 things:</p>

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

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

<p>I've tried almost all the scripts posted and can not find a solution. I don't want to open the divs at same time.
If opens one, close the others.</p>
