jQuery: "show all comments" click & hide at success?

Question

I have this right now:

<a href='javascript:showComments($displayWall[id]);' style='cursor: pointer;'>Show all $isThereAnyComments comments</a>

On success in showComments, i want it to show this div:

#showWallCommentsFor + wallID

And then when it shows, then it should change "Show all" to "close" and then it should hide the div. How can i do this?

Answer 1

My suggestion would be to have a quick go at some jQuery tutorials, as the functionality you're describing should be very simple to put together once you've seen a few examples and have understood the basics.

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery

http://www.w3schools.com/jquery/default.asp

Answer 2

var toggle = false;
$(function() {
    $('a.comments').click(function(e) {
        var $this = $(this);
        $('.toggleComments').toggle(1000,function() {
            if(!toggle) {
                $this.text('Hide Comments');
                toggle = !toggle;
            }else {
                $this.text('Show Comments');
                toggle = !toggle;
            }
        });
        e.preventDefault();
    });
});

Test the above code @ http://jsbin.com/azuro3

Answer 3

HTML:

<div id="comments">
    <!-- comments here -->
</div>
<a href="#" class="commentsBtn">Show Comments</a>

Jquery:

//Start with comments hidden
$('#comments').hide();
//Attach click event to button
$('.commentsBtn').click(function() {
    $('#comments').slideToggle('slow');
    $(this).text($(this).text() == 'Hide Comments' ? 'Show Comments' : 'Hide  Comments');

    //Kill the default function of the anchor tag
    return false;
});

CSS:

.commentsBtn { cursor: pointer; }

• Inline javascript and CSS should be avoided if possible and in this case it is.
• Be sure to have a container div for your comments with an id or class assigned, maybe id="comments".
• Add a class to your show comments link which you can use to apply your CSS styles and in your jquery selector.

Let me know if you get through with it! All the best