Hello,
I have a page on my site which i am remodeling and below is what I am trying to do.

The content on the page makes it rather long but it is split into smaller sections (about 5-6 of these) I want to have a small bar near the top with images of tabs on them. I want these when clicked to show the content of the <div> which they belong to, just below them. I ahve tried using the code shown just below and it works but you can have 2 or more tabs open at the same time which defeats the object by building all the page content up in one long list again! I want it so that when someone clicks a tab then all other tabs are closed ad the clicked one opens. Anyone know an easier way to do this?


Code:
<script type="text/javascript">
function toggle( targetId ){
if (document.getElementById){
target = document.getElementById( targetId );
if (target.style.display == "none"){
target.style.display = "";
} else {
target.style.display = "none";
}
}
}
</script>

<!--Tab Bar-->

<div id="review_tab">
<p><a href="#" onClick="toggle ('review'); toggle ('stats'); return false"><img src="img/tabs/review.jpg" alt="Click to Show/Hide Review" /></a></p>
</div>

<div id="stats_tab">
<p><a href="#" onClick="toggle ('review'); toggle ('stats'); return false"><img src="img/tabs/stats.jpg" alt="Click to Show/Hide stats" /></a></p>
</div>

<div id="gallery_tab">
<p><a href="#" onClick="toggle ('review'); toggle ('stats'); return false"><img src="img/tabs/gallery.jpg" alt="Click to Show/Hide gallery" /></a></p>
</div>

<!--End Tab Bar-->


<!--Review Tab-->
<div id="review">

CONTENT OF REVIEW HERE

</div>
<!--End Review Tab-->



<!--Stats Tab-->
<div id="stats" style="display:none;">

CONTENT OF STATS HERE

</div>
<!--End Stats Tab-->

etc. .
Thanks

Neil