Discussion :

[Friksstyle]

Bonsoir à tous,
Je viens solliciter vos lumières concernant un soucis que je n'arrive pas à régler en jQuery.
Voici la situation:
J'ai un titre et un paragraphe. Au chargement de la page mon paragraphe est caché. Et au clic du titre le paragraphe apparaît.
Jusque là facile.

Mais lorsque j'ajoute un second titre & paragraphe, je me retrouve avec l'apparition et disparition des deux paragraphe en même temps ce que je ne veux pas.
Je souhaite faire apparaitre le 1er paragraphe lorsqu'on clique sur le 1er titre, le second paragraphe au clic du 2eme titre etc etc etc....

Voici mes codes.
jQuery:

Code :

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

1
2
3
4
5
6
7
8
$(document).ready(function(){
 
        $(".slidingDiv").hide();
        $(".show_hide").show();
 
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

HTML:

Code :

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

1
2
3
4
5
6
7
8
9
a href="#" id="titre-show" class="show_hide" title="Cliquer pour afficher/cacher le texte">Show/hide</a>
<div class="slidingDiv">
<a href="#" class="show_hide">
Texte à afficher ou cacher selon les envies</a></div>
 
<a href="#" id="titre-show" class="show_hide" title="Cliquer pour afficher/cacher le texte">Show/hide</a>
<div class="slidingDiv">
<a href="#" class="show_hide">
Texte à afficher ou cacher selon les envies</a></div>

Avez-vous un p'tit coup de pouce à me donner pour que je puisse arriver à mes fins?

Je vous remercie d'avance de votre aide !

[ticroch]

Ba c'est normal vu que tu utilise les mêmes classes, ca execute le toggle sur tous les éléments de cette classe. Vu que tes elements de classe "slidingDiv" sont juste après ceux de classes "show_hide", tu peux utiliser next()

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$(document).ready(function(){
 
    $(".slidingDiv").hide();
    $(".show_hide").show();
 
    $('.show_hide').click(function(){
        $(this).next().slideToggle();
    });
});

[ticroch]

Ah attend j'ai peut être mal lu, pourquoi tu as plusieurs elements de classe show_hide pour un même titre/paragraphe, est-ce-que le deuxieme ne pourrait pas etre supprimé ?

Code :

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

1
2
3
4
5
6
7
 
<a href="#" id="titre-show" class="show_hide" title="Cliquer pour afficher/cacher le texte">
    Show/hide
</a>
<div class="slidingDiv">
    Texte à afficher ou cacher selon les envies
</div>

[ticroch]

Et évite d'utiliser plusieurs fois le même id pour des éléments différents aussi (ici tu as 2 <a id='titre_show'), si ca s'appelle id c'est parceque ca doit être unique normalement ...

tu peux les appeller titre_show1 et titre_show2 par contre !!