Need to hide displayed div when I show others
- by adrian collins
I am stuck. I have a page with 3 buttons, the 3 buttons do a couple things - they change the style of a div, and they also show/hide a content div. The changing of the div style works fine, but I am having issues with the content div. If you land on the page and click the "Our Brands" tab, then click the other 2 tabs, it works fine. If you land on the page, and click "What's New" or "About Us" first, then the show/hide does not work correctly - it does not until you actually click on "Our Brands."
http://www.adriancollins.net/clients/kennys/
Any help would be appreciated, I am a designer first, a developer about 9000th.
Show/Hide Code
<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
if(_hidediv)
_hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () { div.style.display = 'none'; };
}
</script>
Tab Divs
<div id="brand_button"><a href="#" onClick="showdiv('brands_content'); lower.className='blue';angle.className='blue_angle';return false"><img src="wp-content/uploads/2012/10/brands_button.png"></a></div>
<div id="whatsnew_button"><a href="#" onClick="showdiv('new_content');lower.className='black';angle.className='black_angle';return false"><img src="wp-content/uploads/2012/10/whatsnew_button.png"></a></div>
<div id="about_button"><a href="#" onClick="showdiv('about_content');lower.className='green';angle.className='green_angle';return false"><img src="wp-content/uploads/2012/10/about_button.png"></a></div>
Content Divs
<div id="brands_content">Content...</div>
<div id="whats_content">Content...</div>
<div id="about_content">Content...</div>
CSS
#brands_content
{
position: relative;
display: block;
width: 990px;
top: 10px;
height: auto;
min-height: 800px;
margin-left: auto;
margin-top: 0px;
margin-right: auto;
border: 0px;
padding: 0px 0px 0px 0px;
z-index: 12;
}
#new_content
{
position: relative;
display: none;
width: 990px;
top: 10px;
height: auto;
min-height: 800px;
margin-left: auto;
margin-top: 0px;
margin-right: auto;
border: 0px;
padding: 0px 0px 0px 0px;
z-index: 999;
color: #fff;
}
#about_content
{
position: relative;
display: none;
width: 990px;
top: 10px;
height: auto;
min-height: 800px;
margin-left: auto;
margin-top: 0px;
margin-right: auto;
border: 0px;
padding: 0px 0px 0px 0px;
z-index: 999;
}
Thanks
