Afficher / masquer un élément

Résolu
Naek -  
 Naek -
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

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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)
0
Naek
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Naek
  

<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 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
Merci beaucoup ça m'aide énormément à comprendre ! :)
0

Discussions similaires

Comment "inspecter l'élément" sur Mac ?
enzo2501 -
Tatazazazizi -

14 réponses
ne pas voir la story de quelqu'un mais sans la bloquer
Escargot20 -
lofoso -

1 réponse