Afficher / Masquer div au clic

Messages postés
1
Date d'inscription
lundi 4 novembre 2019
Statut
Membre
Dernière intervention
4 novembre 2019
- - Dernière réponse : jordane45
Messages postés
26792
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2019
- 4 nov. 2019 à 19:00
Bonjour,

je souhaite pouvoir avoir sur mon site une liste de sujets : Lorsqu'on clique sur le sujet 1, le texte 1 apparaît. Si on clique de nouveau sur le sujet 1, le texte disparaît. ET, si on clique sur le sujet 2, le texte qui se rapporte au sujet 2 apparaît et celui qui se rapporte au sujet 1 disparaît automatiquement.

Pour l'instant j'ai ce code :

<html>
<head>
<script type="text/javascript">
function showHide[sweatdrop]Div(ele) {
var srcElement = document.getElementById(ele);
if (srcElement != null) {
if (srcElement.style.display == "block") {
srcElement.style.display = 'none';
}
else {
srcElement.style.display = 'block';
}
return false;
}
}
</script>
</head>
<body>
<a onClick="showHideDiv('ID1')";" href="#"><p class="ms-rteFontFace-5 ms-rteThemeBackColor-1-2" style="text-align: left;"><strong class="ms-rteFontSize-2 ms-rteThemeForeColor-5-4">Sujet 1</strong></p></a>
<div align="justify" id="ID1" style="display:none;"> Texte sujet 1</a> </div>

<a onClick="showHideDiv('ID2')";" href="#"><p class="ms-rteFontFace-5 ms-rteThemeBackColor-1-2" style="text-align: left;"><strong class="ms-rteFontSize-2 ms-rteThemeForeColor-5-4">Sujet 2</strong></p></a>
<div align="justify" id="ID2" style="display:none;"> Texte sujet 2</a> </div>


Ce code me convient presque, quand je clique sur "Sujet 1", le texte 1 s'affiche, quand je clique sur "Sujet 2", le texte 2 s'affiche.
Il manque juste la fonction pour cacher le texte 1 quand je clique sur le sujet 2.

Pour cela j'avais ce code :

<head>
<script>
var _hidediv = null;
function visibilite(id) {
if(_hidediv)
_hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () { div.style.display = 'none'; };
}
</script>
</head>
<body>
<a onclick="visibilite('ID1');" href="#"><p class="ms-rteFontFace-5 ms-rteThemeBackColor-1-2" style="text-align: left;"><strong class="ms-rteFontSize-2 ms-rteThemeForeColor-5-4">Sujet 1</strong></p></a>
<div align="justify" id="ID1" style="display:none;">
Texte sujet 1</div>
<a onclick="visibilite('ID2');" href="#"><p class="ms-rteFontFace-5 ms-rteThemeBackColor-1-2" style="text-align: left;"><strong class="ms-rteFontSize-2 ms-rteThemeForeColor-5-4">Sujet 2</strong></p></a>
<div align="justify" id="ID2" style="display:none;">
Texte sujet 2</div>


Mais ce code ne me permet pas de cacher le texte 1 quand je clique sur "Sujet 1"..

Comment faire pour avoir tout ce que je veux en un seul code ? ^^

Merci beaucoup
j'espère avoir été assez claire...
Afficher la suite 

1 réponse

Messages postés
26792
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2019
1886
0
Merci
Bonjour,

Déjà, pour poster ton code, merci d'utiliser les balises de code
explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, ta question concernant le Javascript... je l'ai déplacée dans le bon forum.

Et enfin.. concernant ton besoin :
Etape 1 : Masquer toutes les div de text
Etape 2 : Afficher la Div voulue si elle n'est pas déjà affichée.. dans le cas contraire, la masquer.

Pour l'étape 1 il faut mettre une class commune à toutes tes div de texte.
<div class="div_text"  align="justify" id="ID1" style="display:none;"> Texte sujet 1</div>


idem pour la seconde
<div class="div_text"  align="justify" id="ID2" style="display:none;"> Texte sujet 1</div>


Cela te permettra de les cibler facilement
https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByClassName

Pour l'étape 2 .. tu peux t'inspirer de ton premier code
function showHide(ele) {

  //ETAPE 1
  var allElmClass = document.getElementsByClassName('div_text');
  for (var i = 0; i < allElmClass.length; ++i) {
      var item = allElmClass[i];  
      item.style.display = 'none';
  }
  
  //ETAPE 2
  var srcElement = document.getElementById(ele);
  if (srcElement != null) {
    if (srcElement.style.display == "block") {
      srcElement.style.display = 'none';
    }else {
      srcElement.style.display = 'block';
    }
    return false;
  }
} 


Et pour l'utiliser
<a onclick="showHide('ID2');" href="#">




Commenter la réponse de jordane45