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:

Afficher / masquer un élément
Masquer conversation whatsapp - Guide
Pdf element - Télécharger - PDF
Afficher mot de passe wifi android - Guide
Element introuvable impossible de supprimer - Guide
Comment masquer les amis sur facebook - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
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)

Naek
Modifié le 1 juil. 2022 à 16:18

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.

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > 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>

Naek > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
5 juil. 2022 à 09:20

Merci beaucoup ça m'aide énormément à comprendre ! :)

Discussions similaires

programme qui n'affiche pas le mot secret

Comment "inspecter l'élément" sur Mac ?

Afficher toutes les lignes masquées excel

Comment inspecter l'élément sur mobile ?

Discussions similaires

Newsletters