jquery next(), find() not working

Question

I have a simple html element in view. I want to implement the slideToggle in this view. I think its simple, but i couldn't figured out the exact code. I want to slide down the display_room class when clicked on select Room button. I can't use ID because it is in loop. So, using class I need to find the solution.

Here is my html code.

<div class="panel-body pn_bdy" id="hotel-container">
    <div class="col-md-2" style="padding-left: 8px;">

    </div>
    <div class="col-md-6" style="padding-left: 0px;">
        <div class="hotel_name">
            <a href="#"><span style="color: #0896ff">

            </span></a>
            <p class="side_detail"><span style="font-size: 11px; color: #999999">  </span></p>


            <a style="cursor: pointer;" class="show_map" map="map{{$i}}{{$rand}}" lat="" lng=""><p style="margin-top: 8px; color: #337AB7"><b>view on map</b></p></a>
            <div class="map" id="map{{$i}}{{$rand}}"></div>

        </div>
    </div>
    <div class="col-md-2" style="padding-left: 0px;">
        <div class="rating">

        </div>
    </div>
    <div class="col-md-2 slc_rm">
        <p><span style="font-size: 16px; "></span></p>
        <div class="select_room" id="sl_button">
            <span class="btn btn-primary">Select Room</span>
        </div>
    </div>
</div>
<div class="wrapper-dropdown-menu" id="displayfilterr">
    <div class="display_room">
        Rooms
    </div>
</div>

Here is my jquery, I have tried. First tried:

<script>
    $(document).ready(function(){
        $(".select_room").click(function(){
            $(this).parents('.slc_rm').parents('.pn_bdy').next().find('.display_room').slideToggle();
        });
    });

Second, I tried:

<script>
    $(document).ready(function(){
        $(".select_room").click(function(){

            $(this).parent().parent().next().find(".display_room").slideToggle();
        });
    });
</script>

Answer 1

Try this parents('.pn_bdy:first') gives most parent panel-body and .next() gives next div then find(".display_room") .

 $(".select_room").click(function(){
            $(this).parents('.pn_bdy:first').next().find(".display_room").slideToggle();
    });

$(document).ready(function(){
        $(".select_room").click(function(){
            $(this).parents('.pn_bdy:first').next().find(".display_room").slideToggle();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body pn_bdy" id="hotel-container">
    <div class="col-md-2" style="padding-left: 8px;">

    </div>
    <div class="col-md-6" style="padding-left: 0px;">
        <div class="hotel_name">
            <a href="#"><span style="color: #0896ff">

            </span></a>
            <p class="side_detail"><span style="font-size: 11px; color: #999999">  </span></p>


            <a style="cursor: pointer;" class="show_map" map="map{{$i}}{{$rand}}" lat="" lng=""><p style="margin-top: 8px; color: #337AB7"><b>view on map</b></p></a>
            <div class="map" id="map{{$i}}{{$rand}}"></div>

        </div>
    </div>
    <div class="col-md-2" style="padding-left: 0px;">
        <div class="rating">

        </div>
    </div>
    <div class="col-md-2 slc_rm">
        <p><span style="font-size: 16px; "></span></p>
        <div class="select_room" id="sl_button">
            <span class="btn btn-primary">Select Room</span>
        </div>
    </div>  
</div>
<div class="wrapper-dropdown-menu" id="displayfilterr">
    <div class="display_room">
        Rooms
    </div>
</div>