Sujet Précédent Sujet Suivant

Afficher / Masquer div au clic

Fermé
htmllola Messages postés 1 Date d'inscription lundi 4 novembre 2019 Statut Membre Dernière intervention 4 novembre 2019 - 4 nov. 2019 à 13:49
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 - 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...

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 739
4 nov. 2019 à 19:00
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="#">




0

Discussions similaires

Clic molette qui ne marche pas
louxtix -
SomGuy -

4 réponses
"Vrai" clic droit sans souris (clavier physique ou virtuel) ?
LoloFFM -
LoloFFM -

2 réponses
Clic gauche fonctionne très mal
bru561 -
bru561 -

5 réponses