CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap-3
David Fenk
David Fenk

Reputation: 63

How to make panel-group collapse when the other is opened?

As you can see in the fiddle, both panel-groups can be opened at the same time. How can I make the other one collapse if I click on one?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container container-table">

	<div class="row">
	<div id="menucontainer" class="text-center col-lg-2 col-lg-offset-5">
	
  <div class="panel-group" id="neubau">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <button id="accordion1" data-toggle="collapse" data-parent="#neubau" href="#collapseOne" class="btn btn-default">Neubau</button>
                </h4>
              </div>
              <div id="collapseOne" class="panel-collapse collapse">
                <ul class="list-group">
                  <li class="list-group-item"><button id="neuzupf" type="button" class="btn btn-default one">Zupfinstrumente</button>
					</li>
                    <ul class="list-group">
                      <li class="list-group-item"><button id="neustreich" type="button" class="btn btn-default">Streichinstrumente</button></li></ul>

                      
                </ul>
              </div>
            </div>
                </div>
                
                
  <div class="panel-group" id="restaur">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <button id="accordion2" data-toggle="collapse" data-parent="#restaur" href="#collapseTwo" class="btn btn-default">Restaurierung</button>
                </h4>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse">
                <ul class="list-group">
                  <li class="list-group-item"><button id="restaurzupf" type="button" class="btn btn-default one">Zupfinstrumente</button>
					</li>
                    <ul class="list-group">
                      <li class="list-group-item"><button id="restaurstreich" type="button" class="btn btn-default">Streichinstrumente</button></li></ul>

                      
                </ul>
              </div>
            </div>
                </div>

It seems that it has something to do with the data-parent, but I just can't figure it out. Solution in JQuery would be fine too. Thanks!

Upvotes: 1

Views: 786

Answers (1)

Yashpal Sindhav
Yashpal Sindhav

Reputation: 375

Make data-parent same for both so it work as a siblings panel and work according you want.

Upvotes: 1

Related Questions