Discussion :

[sam16000]

Bonjour à tous !

Je souhaite afficher/masquer du texte au clique de la souris sur un titre (pas au passage, un peu comme les spoilers que l'on peut trouver sur différents sites) et plusieurs fois sur la même page.

Le texte doit-être caché par défaut (à l'ouverture de la page).

Les contraintes : page html et le code JS doit être inclue sur la même page.

J'ai un code qui fonctionne mais le soucis c'est qu'il fonctionne que sur un élément (surement à ause de l'id, l'id=unique). Mais étant limité en caractère je voudrais éviter d'écrire chaque id dans le code Js.

Voici le code Js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<script language="javascript">
$(document).ready(function(){ 
      $('#toggle').click(function(){ 
           $("#test").toggle(); 
                });  });
</script>

Voici le code dans le body:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href='javascript:;' id="toggle">Le titre ou un  petit texte</a><p id="test" style="display: none">LE texte qui s'affiche ou secahe qund on clique sur le titre</p>

Le code fonctionne mais qu'une fois sur la page et pour un seul "titre" . je souhaiterais l'utiliser plusieurs fois, sur plusieurs "titres".

Si quelqu'un peut m'aider ...merci

[Bovino]

Passe par une classe plutôt qu'un id.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$(document).ready(function(){ 
      $('.toggle').click(function(){ 
           $(this).next('.test').toggle();
           return false;
      });  });

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href='#' class="toggle">Le titre ou un  petit texte</a><span class="test">LE texte qui s'affiche ou secahe qund on clique sur le titre</span>

[sam16000]

Merci pour la réponse! maintenant je peux l'utiliser plusieurs fois dans la page.

Par contre sa fonctionne à l'envers , c'est à dire que tout est affiché (développé) à l'ouverture de la page et le texte se cache lorsque je clique sur le titre.

Je vais essayer de modifier , afin que le texte soit caché par défaut et qu'il s'ouvre lorsque je clique sur le titre (là c'est le contraire)

=> j'ai trouvé : style ="dispaly none":

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<span class="test" style="display:none"> le texte qui doit être caché</span>

C'est possible de le mettre dans le script plutot que recopier à chauqe fois style ="dispaly none" dans le body ???

[Mohicane]

Il te suffit d'écrire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$(document).ready(function(){
      $('.test').hide();
 
      $('.toggle').click(function(){ 
           $(this).next('.test').toggle();
           return false;
      });
});

Ce code cachera tous les éléments ayant pour classe "test".

Du coup, tu n'as pas besoin du:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

display: none;

[sam16000]

Super ! Voici un code génial : fonctionnel et court


Merci c'est exactement ce que je voulais ! bravo