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.

This may solve your issue stackoverflow.com/questions/15370544/using-if-else-with-onclick — mcadamm4
– mcadamm4, Commented Aug 24, 2017 at 14:21
@Ashishsah I would like to keep the panel with toggle click (open/close) and only open it with the search -button — TechCount
– TechCount, Commented Aug 24, 2017 at 14:25

Shiladitya · Accepted Answer · 2017-08-24 14:56:37Z

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.

edited Aug 24, 2017 at 14:56

answered Aug 24, 2017 at 14:44

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TechCount Over a year ago

Thank you. When you press the search button once the main panel is open, it closes the panel. Is there any way around this so once the panel is open the search button does nothing?

TechCount Over a year ago

If I'm using <script src="https://ajax.microsoft.com/ajax/jQuery/jquery-3.1.1.min.js"></script> in my project, this won't work anymore. Any way around for it to work with this?

Shiladitya Over a year ago

@TechCount.. Have a look into ithe jsfiddle jsfiddle.net/hbfvta27/1 . It will work with any version of jQuery above than 1.8

sainanky · Accepted Answer · 2017-08-24 14:41:19Z

0

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');
        });
    });

answered Aug 24, 2017 at 14:41

sainanky

5074 silver badges13 bronze badges

Collectives™ on Stack Overflow

Nested bootstrap collapse onclick event

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related