нажмите кнопку и скрыть див в складной гармошке

Question

Свернуть повторный аккордеон на сайте одним нажатием повторяющейся кнопки

У меня есть кнопка аккордеона (с использованием классов начальной загрузки 'panel-default' и 'panel-collapse'), которая повторяется на одной и той же странице несколько раз. Под этой кнопкой аккордеона есть другая кнопка, также повторенная несколько раз на той же странице. Когда я нажимаю на определенную кнопку, я хочу, чтобы она свернула определенный аккордеон, который находится над ней, с помощью jquery.

<div class="panel panel-default">
    <div class="panel-heading accordion-toggle question-toggle " data-toggle="collapse" data-parent="#faqAccordion" data-target="#infoAccordion" aria-expanded="false">
       <h4 class="panel-title">Edit Info</h4>
    </div>
    <div id="infoAccordion" class="panel-collapse collapse in" style="" aria-expanded="false">
         <div class="panel-body">
             some info
         </div>
    </div>
</div>

<div class="col-md-12  col-sm-12  col-xs-12 text-right pan">   
    <button class="nochg-btn">No Change</button>                
</div>

Я уже пробовал:

$(document).ready(function(){
        $(".nochg-btn").click(function(){
          $(this).siblings(".panel-collapse").collapse("hide");

        });
    });

также:

$(document).ready(function(){
        $(".nochg-btn").click(function(){

          $(this).parent().siblings(".panel-default").addClass("collapsed");
          $(this).parent().children(".panel-collapse").removeClass("collapse");
          $(this).parent().children(".panel-collapse").removeClass("in");

        });
    });

и

$(document).ready(function(){
        $(".nochg-btn").click(function(){
          $(event.target).closest('.panel-default').find('.panel-collapse').addClass("collapse");
          $(event.target).closest('.panel-default').find('.panel-collapse').addClass("in");
        });
    });

все безрезультатно. Если кто-нибудь может помочь мне определить, что не так в jQuery, я буду очень признателен за это !!!

Answer 1

     <script>
          $(document).ready(function(){
            $(".nochg-btn").click(function(){
               $(this).parents('.root').find(".panel-collapse").collapse("hide");
            });
        });
        </script>
        <div class="root">
    <div class="panel panel-default">
    <div class="panel-heading accordion-toggle question-toggle " data-toggle="collapse" data-parent="#faqAccordion" data-target="#infoAccordion" aria-expanded="false">
       <h4 class="panel-title">Edit Info</h4>
    </div>
    <div id="infoAccordion" class="panel-collapse collapse in" style="" aria-expanded="false">
         <div class="panel-body">
             some info
         </div>
    </div>
    </div>

<div class="col-md-12  col-sm-12  col-xs-12 text-right pan">   
    <button class="nochg-btn">No Change</button>                
</div>
</div>



<div class="root">
    <div class="panel panel-default">
    <div class="panel-heading accordion-toggle question-toggle " data-toggle="collapse" data-parent="#faqAccordion" data-target="#infoAccordion" aria-expanded="false">
       <h4 class="panel-title">Edit Info</h4>
    </div>
    <div id="infoAccordion" class="panel-collapse collapse in" style="" aria-expanded="false">
         <div class="panel-body">
             some info
         </div>
    </div>
    </div>

<div class="col-md-12  col-sm-12  col-xs-12 text-right pan">   
    <button class="nochg-btn">No Change</button>                
</div>
</div>