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>
