jquery .show() from only the selected div

Tags: jquery,html,css

Problem :

I have a textarea for commenting on various objects. The textarea are initially hidden, and clicked on the comment link as commentbn it shows up which is what I want. But, the problem is that, when I click any of the commentbtn, all the the textarea shows up! Which I don't want. I just want the textarea of the particular subject. Suppose I want the comment to show up from topic1, then only the comment of the topic1 should appear, and not of topic2 or topic3 e.t.c. . How do I do that? Any help or guidance will be greatly appreciated. Thank you.

html:

                <div class="video">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <img src="image/youtube.jpg">
                    <div class="general">
                        <a href="#">Like</a> <a href="#" class="nos">27</a>
                        <a href="#" class="commentbtn">Comment</a> <a href="#" class="nos">27</a>
                        <a href="#">Share</a> <a href="#" class="nos">27</a>
                        <br>
                        <textarea class="comment"></textarea>
                    </div>
                </div>

                <div class="forum">
                    <a class="QA L" href="#">Q</a>
                    <a class="QA R" href="#">Photography</a>
                    <a class="QA R" href="#">Fashion and Style</a>
                    <a class="QA R" href="#">Design</a>
                    <p class="clear_both"></p>
                    <a href="#">What is the most amazing photograph you have ever taken?</a>
                    <img src="image/forum1.jpg">
                    <div class="general">
                        <a href="#">Like</a> <a href="#" class="nos">27</a>
                        <a href="#" class="commentbtn">Comment</a> <a href="#" class="nos">27</a>
                        <a href="#">Share</a> <a href="#" class="nos">27</a>
                        <br>
                        <textarea class="comment"></textarea>
                    </div>
                </div>

css:

#activity .comment {
    display: none;
    width: 502px;
    max-width: 502px;
    padding-bottom: 0px;
    border: 1px solid #dbdbdb;
    height: 17px;
    padding:5px;
    overflow: auto;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

js:

<script type="text/javascript">
    $(function() {
        $('.commentbtn').click(function() {
            $('.comment').show();
            return false;
        });
    });
</script>

---

Solution :

You need to target the sibling comment element of the clicked button, instead you are targeting all comment elements in the page

$(function() {
    $('.commentbtn').click(function() {
        $(this).siblings('.comment').show();
        return false;
    });
});