slidetoggle et modifier texte conditionnellement dans callback [Résolu]

[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 :

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

HTML:

Code :

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 :

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

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

[SpaceFrog]

Code :

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 :

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 :

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 :

 $(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 :

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');
 
        });