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>
