11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Voici un code dont je souhaite me servir, sauf que je rencontre un problème pour faire ce que je souhaite.


<script type="text/javascript">
function switchInfoPerso()
{
divInfo = document.getElementById('divacacher');
if (divInfo.style.display == 'none')
divInfo.style.display = 'block';
else
divInfo.style.display = 'none';
}

function switchInfoPerso2()
{
divInfo2 = document.getElementById('divacacher2');
if (divInfo2.style.display == 'none')
divInfo2.style.display = 'block';
else
divInfo2.style.display = 'none';
}

function switchInfoPerso3()
{
divInfo3 = document.getElementById('divacacher3');
if (divInfo3.style.display == 'none')
divInfo3.style.display = 'block';
else
divInfo3.style.display = 'none';
}
</script>

<a href="javascript: switchInfoPerso();">Afficher le texte</a> 
<a href="javascript: switchInfoPerso2();">Afficher le texte</a> 
<a href="javascript: switchInfoPerso3();">Afficher le texte</a> 


<div id="divacacher" style="display: none;">Le texte qui est cacher</div>
<div id="divacacher2" style="display: none;">Le texte qui est cacher2</div>
<div id="divacacher3" style="display: none;">Le texte qui est cacher3</div>


Le problème est que je souhaite faire apparaître les div UNE par UNE.
SI une des 3 div est déjà en block et que je clic sur un des 2 autre href pour faire apparaître une deuxième div, je souhaite que celle d'avant devienne en none pour ensuite faire apparaître la deuxième.
si quelqu'un peut m'aider ça serait gentil merci à vous ^.^