Q:

How can I make my bootstrap collapse toggles mutually exclusive?

If I've got two buttons toggling collapsible cards, I'd like to make button2 collapse target1 before expanding target2, and vice-versa:
<div class="container">
 <div class="btn-group mx-auto">
  <button class="btn" type="button" data-toggle="collapse" data-target="#target1" aria-expanded="false">
    button1
  </button>
  <button class="btn" type="button" data-toggle="collapse" data-target="#target2" aria-expanded="false">
    button2
  </button>
 </div>
</div>
<div class="collapse" id="target1">
 <div class="card card-body">
   ...
 </div>
</div>
<div class="collapse" id="target2">
 <div class="card card-body">
   ...
 </div>
</div>

Currently if button1 and button2 are clicked one after the other, both cards remain expanded.
Thank you!

A:

You can use the following markup to achieve that.

Note: at the time of writing Bootstrap was still in beta 3.

<div id="group">
    <div class="container">
        <div class="btn-group mx-auto">
            <button class="btn" type="button" data-parent="#group" data-toggle="collapse" data-target="#target1" aria-expanded="false">
                button 1
            </button>

            <button class="btn" type="button" data-parent="#group" data-toggle="collapse" data-target="#target2" aria-expanded="false">
                button 2
            </button>
        </div>
    </div>

    <div class="panel">
        <div class="collapse" id="target1">
            <div class="card card-body">
                CARD 1
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="collapse" id="target2">
            <div class="card card-body">
                CARD 2
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.js"></script>

This example is making use of the data-parent=".selector" feature of bootstrap, which you have to define on the toggle buttons. Additionally wrap the collapsibles into a div with the selector given above. (I used #group in this case.)
Also, as there is a bug with this built in feature in bootstrap, you also have to wrap the collapsibles in a .panel.
UPDATE:
Apparently the divs that wrap the collapsibles does not necessarily have to have the .panel class, but it is still important that the .collapse divs must not be immediate children of the #group element.
UPDATE 2:
The updated markup for Bootstrap 4.1 is as follows.

<div id="group">
    <div class="container">
        <div class="btn-group mx-auto">
            <!-- Note removed 'data-parent' attribute -->
            <button class="btn" type="button" data-toggle="collapse" data-target="#target1" aria-expanded="false">
                button 1
            </button>

            <button class="btn" type="button" data-toggle="collapse" data-target="#target2" aria-expanded="false">
                button 2
            </button>
        </div>
    </div>

    <div class="panel">
        <!-- Note relocated 'data-parent' attribute -->
        <div class="collapse" id="target1" data-parent="#group">
            <div class="card card-body">
                CARD 1
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="collapse" id="target2" data-parent="#group">
            <div class="card card-body">
                CARD 2
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

