Nested bootstrap collapse onclick event

Question

I'm new to bootstraps and coding altogether, so I am currently trying to open my main bootstrap panel with an onclick -event which contains nested sub panels.

This is my index.html containing the panels and the button;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form onsubmit="return false" id="searchForm">
    <input type="button" value="Search" id="search" class="openPanel" />
</form>  
      
<br/><br/>

<div class="container">
  <div class="panel-groupMain">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">Main panel</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
            <!-- Sub panels -->
          <div class="panel-group" id="accordion">
              <!-- Sub panel 1 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse2" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentOne"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 2 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse3" class="panel-collapse collapse">
                      <div class="panel-body">
                          <div class="day" data-name="Tuesday"></div>
                          <p id="contentTwo"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 3 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 3</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse6" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentFive"></p>
                      </div>
                  </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I've tried this code for opening the main -panel but I can't get this to work;

<script type="text/javascript">
    $(document).ready(function () {
        $("#search").on("click", function () {
            $(this).closest('.panel-heading').find('.collapse').collapse('show');
        });
    });                
</script>

So as for my question, is there any easy and effective way to only open the main -panel with the button click and after it's opened the button won't affect the panel anymore?

Thanks.

Answer 1

Here you go with a solution https://jsfiddle.net/hbfvta27/

$(document).ready(function () {
  $("#search").on("click", function () {
    if( !$('.collapse').first().hasClass('in'))
      $('a[data-toggle="collapse"]').first().click();
  });
});    

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form onsubmit="return false" id="searchForm">
    <input type="button" value="Search" id="search" class="openPanel" />
</form>  
      
<br/><br/>

<div class="container">
  <div class="panel-groupMain">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">Main panel</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
            <!-- Sub panels -->
          <div class="panel-group" id="accordion">
              <!-- Sub panel 1 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse2" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentOne"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 2 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse3" class="panel-collapse collapse">
                      <div class="panel-body">
                          <div class="day" data-name="Tuesday"></div>
                          <p id="contentTwo"></p>
                      </div>
                  </div>
              </div>
              <!-- Sub panel 3 -->
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 3</a>
                        <span class="indicator glyphicon glyphicon-chevron-down  pull-right"></span>
                    </h4>
                  </div>
                  <div id="collapse6" class="panel-collapse collapse">
                      <div class="panel-body">
                          <p id="contentFive"></p>
                      </div>
                  </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Hope this will help you.

Answer 2

just add a class named 'in' on click of a bootstrap panel I hope it will help you

    $(document).ready(function () {
        $(".panel-groupMain").on("click", function () {
            $(this).find('#collapse1').toggleClass('in');
        });
    });