Javascript click function for multiple Classes

Question

So basically I have this little social networking site which allow comments. I've built a comment section that will slide down once a user clicks "Comment" and it slides down under the users status.

My problem is that right now, the JavaScript only works on ONE post ID, and not the rest obviously seeing you can only use an ID once. But of course if I use classes instead, All the comment sections slide down because now they're all the same class. See below for my HTML and JavaScript.

So if someone has a better method out there, please help :)

$(function () {
    $(".comment-box").slideUp();

    //when "comment" is clicked, slide down the comment box. 
    if ($(".comment-box-btn").click(function () {
        $(".comment-box").slideDown();
    }));
    //when "cancel" is clicked, slide up the comment box.
    if ($(".close-comment-box").click(function () {
        $(".comment-box").slideUp()
    }));

});

And here's the HTML used

//anchor for "Comment" 
<a class="comment-box-btn" href="#"><i class="icon-comment"></i> Comment</a>


//comment box
<div class="row comment-box" style="display:none;">
<div class="col-md-12">
<form accept-charset="UTF-8" action="" method="post"> 
<textarea class="form-control animated" cols="180" id="new-comment" name="comment" placeholder="Comment.." rows="1"></textarea>

<div class="text-right" style="margin-top:20px;">
<a class="btn btn-default close-comment-box" href="#">
<span class="glyphicon glyphicon-remove"></span> Cancel</a>
<button class="btn btn-info" type="submit">Comment</button>
</div>
</form>
</div>
</div>

JFK · Accepted Answer · 2013-11-10 03:16:52Z

3

If each comment box is adjacent to their button, you could do

REVISED VERSION :

$(function () {
    //slide up the box on page load. 
    $(".comment-box").slideUp();
    $(".comment-box-btn").each(function (i) {
        $(this).click(function () {
            $(".comment-box").eq(i).slideDown(500, function () {
                $(this).find(".close-comment-box").click(function () {
                    $(".comment-box").eq(i).slideUp()
                });
            });
        }); // click
    }); // each
});

see NEW JSFIDDLE

edited Nov 10, 2013 at 3:16

answered Nov 10, 2013 at 3:02

JFK

41.2k31 gold badges138 silver badges314 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ajc Over a year ago

if you have multiple comment-btn instances and open them up at the same time. Closing/sliding up wud be problem?jsfiddle.net/ankitjc/KuRtW/3

Jason Bassett Over a year ago

@ajc that works on JSfiddle but not when uploaded to my server lol

helion3 · Accepted Answer · 2013-11-10 02:55:11Z

0

If the close-comment-box button is inside the comment-box, you can just find the parent:

$('.close-comment-box').click(function(){
  $(this).parents('.comment-box:eq(0)').slideUp();
});

This way it only applies the parent comment-box the button belongs to, not all comment boxes.

answered Nov 10, 2013 at 2:55

helion3

38k16 gold badges66 silver badges113 bronze badges

Comments

asiviero · Accepted Answer · 2013-11-10 02:55:54Z

0

Instead of calling $(".comment-box").slideDown(); and $(".comment-box").slideUp(); on the handlers, try using $(this) and the parent() function. If I'm not mistaken, the buttons are three levels in so it's gonna be:

$(function(){ 

//slide up the box on page load. 
    $(".comment-box").slideUp(); 

    //when "comment" is clicked, slide down the comment box. 
    if($( ".comment-box-btn" ).click( function() {
    $(this).parent().parent().parent().slideDown();
    {
     //when "cancel" is clicked, slide up the comment box.
     if($( ".close-comment-box" ).click( function() {
         $(this).parent().parent().parent().slideUp()
     }));
     }}));
     });;

edited Nov 10, 2013 at 2:55

answered Nov 10, 2013 at 2:50

asiviero

1,24510 silver badges16 bronze badges

2 Comments

JFK Over a year ago

the OP doesn't want to slideDown the .comment-box-btn button ;)

Jason Bassett Over a year ago

yeah.. that's not going to work. That would ask .comment-box-btn to slide down...

Collectives™ on Stack Overflow

Javascript click function for multiple Classes

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related