Check out this interactive example: https://jsfiddle.net/dominijk/bLpach25/1/
The accordion layout I have set up consists of collapsible cards where opening one card causes the others to collapse. The tabs within each card are functioning properly.
My goal is to create a link between the tabs and the card collapses. In other words, when a tab is clicked, its content should be displayed while other cards collapse. Similarly, if another card is opened, the tab content should collapse.
<div id="accordion3">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseA">
Colour map
</a>
<!-- Add option to collapse all cards here as shown in https://codepen.io/dominijk/pen/JejNpp-->
</div>
<div id="collapseA" class="collapse show" data-parent="#accordion3">
<div class="card-body" id=menu>
<fieldset>
<input id='radioOne' type='radio' name='rtoggle' value='radioOne'>
<label for='radioOne'>One</label><br>
<input id='radioTwo' type='radio' name='rtoggle' value='radioTwo'>
<label for='radioTwo'>Two</label><br>
<input id='radioThree' type='radio' name='rtoggle' value='radioThree' checked='checked'>
<label for='radioThree'>Three</label><br>
</fieldset>
</div>
</div>
</div>
<div id="accordion2">
<div class="card">
<div class="card-header collapse show">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseB">
Filter features by
</a>
<ul class="nav nav-tabs">
<li class="collapsed card-link"><a class="nav-link" data-toggle="tab"
href="#tab-1" role="tab">Tab 1</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-
2" role="tab">Tab 2</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-3" role="tab">Tab 3</a></li>
</ul>
<div id="collapseB" class="card card-tabs-1" data-parent="#accordion2">
<div class="card-block">
<div class="tab-content">
<div class="tab-pane active" id="tab-1" data-parent="#accordion2">
<h4 class="card-title">Tab 1</h4>
<p class="card-text">Content.</p>
</div>
<div class="tab-pane" id="tab-2">
<h4 class="card-title">Tab 2</h4>
<p class="card-text">Content.</p>
</div>
<div class="tab-pane" id="tab-3">
<h4 class="card-title">Tab 3</h4>
<p class="card-text">Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseC">
Show boundaries for
</a>
</div>
<div id="collapseC" class="collapse" data-parent="#accordion2">
<div class="card-body">
Card content can be <br>
<span> span </span>
<div> div </div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseD">
Another panel
</a>
</div>
<div id="collapseD" class="collapse" data-parent="#accordion2">
<div class="card-body">
Card content can be <br>
<span> span </span>
<div> div </div>
</div>
</div>
</div>
</div>
</div>