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;
    });
});

    CSS Howto..

    How to float elements to the center in CSS?

    How can i create a hexagon shape with an image inside? [duplicate]

    How to change Image inside of CSS of a usercontrol

    how to clean the css style of jquery-ui be added automatically when someone use “.draggable()”

    How to make attractive dropdown menu using css3? [closed]

    How to align a paragraph to center of cell in table

    How to make the buttons responsive?

    How does reveal.js resize elements?

    How to spin an image horizontally with CSS

    How to change the color of the text next to an input field in an HTML form?

    Bootstrap “jumbotron-narrow” example. how does the style change?

    How to change the text color of the clicked row of table with css and jquery

    Should be Simple: How to preserve data on a page of basic javascript/css/html when going to another page

    How to make height squeeze with css

    How to fix misaligned rows alt the last records, after using vertical scroll and frozen column?

    How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets?

    How to write this :not “in other element” CSS rule?

    slide show with bootstrap

    How to force CSS refresh when using ASP.NET Themes?

    How to edit CSS class via jQuery if statement

    How to cancel an upstream CSS declaration?

    css boxes are not shown in the right place (when adding doctype)

    How to use JS to target specific domain html links with CSS classes?

    How do I edit the code of a WordPress site?

    How to rotate a div, while jQuery animates the same div

    How to make text labels stick next to an image in CSS?

    Show/Hide & Change CSS functions are not working

    How do you replicate this box-shadow effect?

    How can I figure out how much a div shifts when a translate:scale is applied?

    How to fix width of column in two-column CSS lay out?