Voici un code pour alterner le contenu de 2 DIV et avec un seul lien.
On va créer tout d’abord 2 div contenant 2 textes à alterner avec un CSS element.style.display différent.
<div id=”mod_1″ style=”display: block;”> BONJOUR </div>
<div id=”mod_2″ style=”display: none;”> AU REVOIR </div>
Explication : element.style.display ne retourne une valeur que si l’élément a un attribut HTML style avec propriété CSS display renseignée, donc dans notre cas, la DIV avec l’id mod_1 sera affichée au chargement de la page tandis que mod_2 sera cachée.
Il nous faut un lien pour pouvoir alterner entre les 2 div.
<a onclick=”alterner(’mod_1′,’mod_2′);” title=”Alterner les 2 div”>Alterner</a>
Il nous manque plus que le Javascript :
<script type=”text/javascript”>
function alterner(obj1, obj2){
var obj1 = document.getElementById(obj1);
var obj2 = document.getElementById(obj2);
obj1.style.display = (obj1.style.display == “block”) ? “none” : “block”;
obj2.style.display = (obj2.style.display == “block”) ? “none” : “block”;
}
</script>
Que va faire le script ? Si la DIV mod_1 (obj1 la fonction javascript) est à display:block (affichée) alors on définit la DIV mod_2 à display:none (cachée) et inversement.
Voici un exemple en cliquant sur le lien “Alterner les DIV” :
Alterner les DIV
BONJOUR
