CODEWITHSUNDEEP
jquery
Karem
Karem

Reputation: 18123

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

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?

Upvotes: 0

Views: 1991

Answers (3)

designerdre101
designerdre101

Reputation: 813

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

Upvotes: 0

user372551
user372551

Reputation: 

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

Upvotes: 1

TimS
TimS

Reputation: 6052

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

Upvotes: 2

Related Questions