slideDown only clicked element jQuery

Question

i have some menu in my website with same element , i want to use slideDown in jQuery to slidedown only clicked menu

but now when i clicked one menu all menu get slidedown

HTML

        <div id="sidebar-right" >



                <div class="sidebar-menu">
                        <span class="sidebar-post">Last Posts</span>
                                <span class="sidebar-post-slide">+</span>

                               <div style="margin-top:-35px"></div>
                               <div class="sidebar-text">
Some content
                            </div>
                </div>
                <!-- S2 -->
                                <div class="sidebar-menu">
                        <span class="sidebar-post">Last Comments</span>
                                <span class="sidebar-post-slide">+</span>

                      <div class="sidebar-text">          
Some content
                        </div>
                </div>
                <!-- End S2 -->

         </div>   

and jQuery side

$(function() {
$('.sidebar-post-slide').click(function () {
if ( $('.sidebar-text').is( ":hidden" ) ) {
$('.sidebar-text').slideDown(800);
} else {
$('.sidebar-text').hide(800);
}
});
});

Answer 1

You need to slidedown the sibling sidebar-text element, not all sidebar-text elements

$(function() {
    $('.sidebar-post-slide').click(function () {
        //find the sibling sidebar-text element and complete any queued animations
        var $stext = $(this).siblings('.sidebar-text').stop(true, true);
        if ( $stext.is( ":hidden" ) ) {
            $stext.slideDown(800);
        } else {
            $stext.hide(800);
        }
    });
});

Demo: Fiddle

Answer 2

Another option is to use the method closest() . But in your case Arun's anwser is better.