Hiding/showing divs upon clicking

Hi,
let me explain the situation. You have a wordpress template and when you start writing you can fill in this:

<div id="feat1">
<p><a href="#" onclick="toggle('feat1display');">
If you click this feat1display should be toggled on and the others of</a></p></div>
<div id="feat1display">
<h1 id="feat1heading">Heading</h1>
<p id="feat1descr">Description</p></div>[CODE]

Now I only want to appear feat1display when I click feat1
and feat2display appears when you click feat2 (another wordpres post) but it should also disable feat1display then

Javacode:
[CODE]<script language="JavaScript">   
    function toggle(id) {   
        var state = document.getElementById(id).style.display;   
            if (state == 'block') {   
                document.getElementById(id).style.display = 'none';   
            } else {   
                document.getElementById(id).style.display = 'block';   
            }   
        }   
</script> 

Code (markup):

css

#feat2display,#feat3display,#feat4display{
display:none;}

Code (markup):

Do you have a solution, i would appreciate this a lot[/QUOTE]

 

Try this JavaScript:

<script language="JavaScript">   
    function toggle(id) {
        var divs = new Array('feat1display','feat2display');
        for (i=0; i<divs.length; i++) {
            document.getElementById(divs[i]).style.display = 'none';
        }
        document.getElementById(id).style.display = 'block';   
    }   
</script>

Code (markup):

You can add ids to the divs array without changing the code, as long as the items in the array match the ids on the HTML document exactly.

 

I repaced the code by something more easy:

<script language="JavaScript">   
    function feat1() {
	  document.getElementById("featdisplay1").style.display = "block"
         document.getElementById("featdisplay2").style.display = "none";
  document.getElementById("featdisplay3").style.display = "none";
  document.getElementById("featdisplay4").style.display = "none"

}
function feat2() {
	  document.getElementById("featdisplay2").style.display = "block"
         document.getElementById("featdisplay1").style.display = "none";
  document.getElementById("featdisplay3").style.display = "none";
  document.getElementById("featdisplay4").style.display = "none"

}
function feat3() {
	  document.getElementById("featdisplay3").style.display = "block"
         document.getElementById("featdisplay2").style.display = "none";
  document.getElementById("featdisplay1").style.display = "none";
  	  document.getElementById("featdisplay4").style.display = "none"


}
function feat4() {
	  document.getElementById("featdisplay4").style.display = "block"
         document.getElementById("featdisplay2").style.display = "none";
  document.getElementById("featdisplay3").style.display = "none";
    document.getElementById("featdisplay1").style.display = "none";


}
</script> 

Code (markup):

my html code:
<div><p><a href="javascript:feat1();" >Donec </a></p></div>
<div id="featdisplay1">...</div>

<div><p><a href="javascript:feat2();" >Donec </a></p></div>
<div id="featdisplay2">...</div>

<div><p><a href="javascript:feat3();" >Donec </a></p></div>
<div id="featdisplay3">...</div>

<div><p><a href="javascript:feat4();" >Donec </a></p></div>
<div id="featdisplay4">...</div>

This works perfect in IE, but in Firefox he does not want to click the first link and I can only click each link once. (same for safari)

Does anyone know a solution for this,
thanks in advance

 

Array version is better, defining one each function for divs is not usefull. JS code will grow every time you add another div.