Question

I have this HTML markup:

<a title="Hide comments" hreflang="1" class="comment-show-link" rel="tooltip" href="">Hide comments</a>
<a title="Hide comments" hreflang="2" class="comment-show-link" rel="tooltip" href="">Hide comments</a>

I’ll like to change the title and HTML to “Show comments” on slideToggle but didn’t know how. I write this code to show/hide a DIV:

$('.comment-show-link').click(function(e) {
        $('#comment-show-'+$(this).attr("hreflang")).slideToggle('slow');
        e.preventDefault();
});

But not know how to check if DIV is hidden or visible and in each case change title and HTML. Also I know that I can use text() or html() jQuery functions to achieve this but how? Any help?

Thanks in advance

Answer 1

Try this:

$('.comment-show-link').click(function(e) {
        var $this = $(this);
        var num = $this.attr('hreflang'); 
        $('#comment-show-'+num).slideToggle('slow', function(){
            if ($(this).is(':hidden')) {
               // do something here
               // $this.attr('...', '...') 
            }
        });
        e.preventDefault();
});