Discussion :

[vince351]

Bonjour,

J'utilise la fonction slidetoggle qui au click sur un lien m'affiche ou me cache une div qui contient les commentaires d'un article. Cela fonctionne parfaitement mais je souhaite modifier le texte du lien : quand les commentaires sont cachés je souhaite qu'il soit affiché "Afficher les commentaires" et "Masquer les commentaires" lorsque les commentaires sont visibles.

Mon code :

Code :

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

1
2
3
4
5
 $(".comments_header").click(function(){
 
             $(this).next('#comments').slideToggle('500', function() {});
 
        });

HTML:

Code :

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

1
2
<h4 class="comments_header"><a href="#">Afficher les  commentaires</a></h4>
                    <div id="comments">Ici s affichent les commentaires</div>

J'arrive à changer le texte du lien avec le code suivant

Code :

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

1
2
 
 $('a:first', this).text("Masquer les commentaires");

Il faudrait que je puisse tester si le bloc est affiché ou non.

[SpaceFrog]

Code :

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

1
2
3
4
5
 $(".comments_header").click(function(){
 
             $(this).html( ($(this).html()=="Afficher les  commentaires")?"Masquer les commentaires":"Afficher les  commentaires") ).next('#comments').slideToggle('500');
 
        });

ou

Code :

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

1
2
3
4
5
 $(".comments_header").click(function(){
 
             $(this).next('#comments').slideToggle('500',function(){($(this).html()=="Afficher les  commentaires")?"Masquer les commentaires":"Afficher les  commentaires") });
 
        });

ou

Code :

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

1
2
3
4
5
 $(".comments_header").click(function(){
 
             $(this).next('#comments').slideToggle('500',function(){($(this).next().is(":visible")?"Masquer les commentaires":"Afficher les  commentaires") });
 
        });

[vince351]

Merci,
la première solution fonctionne mis à part que je perd le lien, j'ai essayé :

Code :

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

 $(this).html( ($(this).html()=="<a href='#'>Afficher les  commentaires</a>")?"<a href='#'>Masquer les commentaires</a>":"<a href='#'>Afficher les  commentaires</a>").next('#comments').slideToggle('500');

Mais cela ne fonctionne plus. La solution ne doit pourtant pas être bien loin.

[SpaceFrog]

Code :

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

1
2
3
4
5
6
7
8
9
<h4 class="comments_header"><a href="#" id="label">Afficher les  commentaires</a></h4>
                    <div id="comments">Ici s affichent les commentaires</div>
 
 $(".comments_header").click(function(){
 
             $('#label').html( ($('#label').html()=="Afficher les  commentaires")?"Masquer les commentaires":"Afficher les  commentaires") )
$(this).next('#comments').slideToggle('500');
 
        });