How do you make a panel collapse when pressing a normal bootstrap button? Here's my code:

<div class="panel panel-primary" style="border-color: #464646;">
    <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
        <div style="float: left; margin-top: 5px;" data-toggle="collapse" href="#collapse1">Select Object</div>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
            <!--Object Buttons-->
            <button *ngFor="let object of objects" type="button" data-toggle="collapse" style="margin-right: 10px;" class="btn btn-primary" (click)="doThings();"</button>
        </div>
    </div>
</div>

The panel-body will collapse when I click the panel-heading, but I would like to have the panel-body collapse when clicking one of the 'object' buttons.

How do you make a panel collapse when pressing a normal bootstrap button? Here's my code:

<div class="panel panel-primary" style="border-color: #464646;">
    <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
        <div style="float: left; margin-top: 5px;" data-toggle="collapse" href="#collapse1">Select Object</div>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
            <!--Object Buttons-->
            <button *ngFor="let object of objects" type="button" data-toggle="collapse" style="margin-right: 10px;" class="btn btn-primary" (click)="doThings();"</button>
        </div>
    </div>
</div>

The panel-body will collapse when I click the panel-heading, but I would like to have the panel-body collapse when clicking one of the 'object' buttons.

• javascript
• html
• twitter-bootstrap
• angular

Share Improve this question Follow edited Jul 19, 2016 at 21:29 Jakob 3,54644 gold badges2828 silver badges4242 bronze badges asked Jul 19, 2016 at 20:24 Roka545Roka545 3,6362323 gold badges7070 silver badges111111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can apply the same data-target="#collapse1" to the button as the href has.

href

<a data-toggle="collapse" href="#collapse1">Select Object</a>

Button

<button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse1">

Also, your button isn't closed. missing > to close it.

<button *ngFor="let object of objects" type="button" data-toggle="collapse" style="margin-right: 10px;" class="btn btn-primary" (click)="doThings();"

Example:

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-group">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Select Object</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse1">
          Button with the same data-target
        </button> Panel Body
      </div>
    </div>
  </div>
  <div class="panel panel-danger">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse2">Select Object</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
        <button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse2">
          Button with the same data-target
        </button> Panel Body
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>