jquery same class name click function

Question

Whenever I click the comment link all of the divs are opening but i need that particular only to be opened.

HTML:

<div>
    <a href="#" class="ck">comment</a>
    <div class="cmt">
        <input type="text" class="txt"/>
        <input type="button" value="submit"/>
    </div></div>
<div>
    <a href="#" class="ck">comment</a>
    <div class="cmt">
        <input type="text" class="txt">
            <input type="button" value="submit">
            </div></div>
        <div>
            <a href="#" class="ck">comment</a>
            <div class="cmt">
                <input type="text" class="txt"/>
                <input type="button" value="submit"/>
            </div></div>
        <div>
            <a href="#" class="ck">comment</a>
            <div class="cmt">
                <input type="text" class="txt"/>
                <input type="button" value="submit"/>
            </div></div>

jQuery:

$(document).ready(function(){
    $(".cmt").hide();
    $(".ck").click(function(){
        $(".cmt").show();
    });
});

jsfiddle: http://jsfiddle.net/48gfje0f/

Ash · Accepted Answer · 2015-07-16 20:15:58Z

1

You can use jQuery nextAll() and then filter for the first matching element:

$(".cmt").hide();
$(".ck").click(function(){
    $(this).nextAll(".cmt:first").show();
});

Demo: http://jsfiddle.net/48gfje0f/3/

Also, instead of using show() you could use toggle(), which will show and hide the relevant div when you click on the link.

answered Jul 16, 2015 at 20:15

Ash

2,1082 gold badges19 silver badges23 bronze badges

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

Comments

lmgonzalves · Accepted Answer · 2015-07-16 19:38:13Z

0

You need to use this to "find" the required elements. In this case $(this).next(), because .cmt is the adjacent sibling of .ck. Just like:

$(".ck").click(function(){
    $(this).next().show();
});

DEMO

answered Jul 16, 2015 at 19:38

lmgonzalves

6,5883 gold badges24 silver badges43 bronze badges

2 Comments

coder Over a year ago

what to do if their is another element in between .ck and .cmt?

lmgonzalves Over a year ago

As @Andrew say in the other answer, $(this).nextAll(".cmt:first").show(); should work.

Collectives™ on Stack Overflow

jquery same class name click function

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related