Jquery function not working on specific div that shares class name

Question

I have several of these markups as post from users and what I wanted was when the user clicks .showComments the .threadComments div to slide down , AND it does , on all divs with .threadComments.

<div class="row">

    <div class="large-2 columns" align="center">

        <img class="th" src="http://placehold.it/60x60&text=[img]"/>
        <span class="user_under_thumbnail">Andrei</span>

    </div>
    <div class="large-10 columns">

        <p class="speechBubbleMain">1 ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.</p>
        <ul class="inline-list">
            <li class="threadoptions"><a>Preview</a></li> 
            <li class="threadoptions"><a>Share</a></li>
            <li class="threadoptions"><a class="showComments">Comments</a></li>
        </ul>

        <div class="ThreadComments"> <!-- Here is the collapsible part -->
            <div class="row collapse">
                <div class="large-1 columns small-3" align="center"><img src="http://placehold.it/35x35&text=[img]"/></div>
                <div class="large-11 columns"><p class="speechBubbleSecondary"><strong class="commenter_name">George</strong> Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit</p></div>
            </div>
            <div class="row collapse">
                <div class="large-1 columns small-3" align="center"><img src="http://placehold.it/35x35&text=[img]"/></div>
                <div class="large-11 columns"><p class="speechBubbleSecondary"><strong class="commenter_name">Iordache</strong> Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit</p></div>
            </div>
            <div class="row collapse"> <!-- the user's input -->
                <div class="large-1 columns small-3" align="center"><img src="http://placehold.it/35x35&text=[img]"/></div>
                <div class="large-11 columns"><textarea class="thread_submit_comment"></textarea></div>
            </div>
        </div>
    </div>
</div>

I have tried multiple methods as listed down bellow , but they all trigger all divs with .threadComments

$('.ThreadComments').hide();
        $(".showComments").click(function(e) {
            e.preventDefault();

            var slidethis = $(this).parent().find('.ThreadComments');
           //or
            var slidethis = $(this).closest('.showComments').find('.ThreadComments');
           //or
            var slidethis = $(this).closest('.showComments').next('.ThreadComments');
           //or
            var slidethis = $(this).parents('.inline-list').closest('.ThreadComments');

            $('.ThreadComments').not(slidethis).slideToggle();
            slidethis.stop().slideToggle();

        });

But they all seem to trigger all divs with .threadComments. I've check all recent posts about this issue on StackOverflow , but nothing seems to work for me , Is it something to do with the markup ? Can't figure out what I am doing wrong.

Answer 1

Try this:

$('.ThreadComments').hide();
$(".showComments").click(function(e) {
    var slidethis = $(this).parents('.inline-list').next('.ThreadComments');
    slidethis.slideToggle();
    e.preventDefault();
});

JSFiddle