Need to hide displayed div when I show others

Posted by adrian collins on Stack Overflow See other posts from Stack Overflow or by adrian collins
Published on 2012-10-23T22:45:02Z Indexed on 2012/10/23 23:00 UTC
Read the original article Hit count: 302

Filed under:
|
|
|

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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about div