Afficher / masquer un élément

Résolu/Fermé
Naek - 30 juin 2022 à 17:35
 Naek - 5 juil. 2022 à 09:20
Bonjour à vous,

Je n'arrive pas à faire ce que je veux...

Voici l'architecture:
[TITRE 1]
(texte 1)

[TITRE 2]
(texte 2)


De base il n'y aurait que les [TITRE] d'affichés, les (texte) masqués.
Il me faudrait pouvoir afficher le (texte 1) lorsqu'on clique sur le [TITRE 1]
Et ensuite, le plus important, cacher le (texte 1) ET afficher le (texte 2), lorsqu'on clique sur le [TITRE 2]

Et ça pour plusieurs [TITRE]

J'arrive facilement à afficher / masquer élément par élément, mais je n'arrive pas à faire en sorte de masquer un élément tout en affichant un autre, en 1 clique sur le [TITRE]


Merci beaucoup à vous pour votre aide.
A voir également:

1 réponse

jordane45 Messages postés 38222 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 juillet 2024 4 683
30 juin 2022 à 17:38
Bonjour,

ça passe forcéement par du Javascript ...

Et si tu veux qu'on t'aide à corriger ton code, il faudra nous le montrer.

A noter que, le plus simple ..
Tu utilises des CLASS sur tes éléments.
Lors du clic, tu masques TOUS les éléments ayant la class voulue
et tu n'affiches que l'élément désiré (via son id ou tout autre attribut permettant de le cibler)
Ha mince je ne suis donc pas dans le bon forum ?

Donc utiliser des class sur tous les éléments afin de TOUS masquer, puis afficher l'élément voulu via son ID.
Car là j'ai mis que 2 exemples (texte 1 et 2), mais dans les faits il y en a plusieurs autres.

Voilà mon code (surement moche, désolé je suis débutant dans le code j'essaye d'apprendre) :


<script>
$(document).ready(function(){
$("dev1").click(function(){
$("cach1").toggle();
});
});
</script>

<dev1><a href="#"><div class="titre1"><h6>TITRE</h6></div></a></dev1>

<cach1><div class="texte1">TEXTE</div></cach1>

//

<script>
$(document).ready(function(){
$("dev2").click(function(){
$("cach2").toggle();
});
});
</script>

<dev2><a href="#"><div class="titre2"><h6>TITRE</h6></div></a></dev2>

<cach2><div class="texte2">TEXTE</div></cach2>

//

[...]



Mais avec ça, déjà tout est affiché de base alors que je voudrais que les (texte) soient masqués de base. Et puis afficher/masquer un n'agit pas sur les autres.
0
jordane45 Messages postés 38222 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 juillet 2024 4 683 > Naek
1 juil. 2022 à 21:28

<a class="btn-affiche" data-texte="txt1">
  <div class="titre1"><h6>TITRE 1</h6></div>
</a>
<div id="txt1" class="texte">TEXTE 1</div>

<a class="btn-affiche" data-texte="txt2">
  <div class="titre2"><h6>TITRE 2</h6></div>
</a>
<div id="txt2" class="texte">TEXTE 2</div>

  
  
  
<script>
$(document).ready(function(){
  $(".btn-affiche").click(function(){
    $(".texte").hide(); //on masque tous les textes
    $("#"+$(this).data("texte")).show(); // on affiche le texte correspondant
  });
  
  
  $(".texte").hide(); // de base, on masque tous les textes
  
});
</script>  
1
Naek > jordane45 Messages postés 38222 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 juillet 2024
5 juil. 2022 à 09:20
Merci beaucoup ça m'aide énormément à comprendre ! :)
0