View Single Post
Old 12-03-2012, 09:39 PM   PM User | #1
mattetc
New to the CF scene

 
Join Date: Dec 2012
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
mattetc is an unknown quantity at this point
Hide/show: need to display one div by default

I found the following code that works great EXCEPT that it shows all divs upon page load. I need to have 'content1' display and the other divs be hidden when the page loads. After clicking any of the showHide links it behaves as expected. What code do I need to add/change/remove?

Code:
<script>
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3','content4'];
for (var i=0;i<divs.length;i++)
  {
 if (onediv != document.getElementById(divs[i]))
    {
    document.getElementById(divs[i]).style.display='none';
    }
  }
onediv.style.display = 'block';
}
</script>

<a href="javascript:showHide('content1');">link1</a>
<a href="javascript:showHide('content2');">link2</a>
<a href="javascript:showHide('content3');">link3</a>
<a href="javascript:showHide('content4');">link4</a>

<div id="content1">Default content</div>
<div id="content2">2nd item</div>
<div id="content3">3rd item</div>
<div id="content4">4th item</div>
mattetc is offline   Reply With Quote