title: Bootstrap 4 getting nav tabs to collapse with card accordion
body: <p>As this fiddle <a href="https://jsfiddle.net/dominijk/bLpach25/1/" rel="nofollow noreferrer">https://jsfiddle.net/dominijk/bLpach25/1/</a> </p>
  
  <p>I have a series of cards in an accordion which collapse when another card opens. I can get the tabs to sit within the card and function as tabs. </p>
  
  <p>What i want to do is link the nav tab to the card collapse </p>
  
  <p>ie. If you click on the nav tab the tab content is shown and the other cards collapse, in reverse if another card is opened the tab content should collapse. </p>
  
  <pre><code>    &lt;div id="accordion3"&gt;
      &lt;div class="card"&gt;
      &lt;div class="card-header"&gt;
        &lt;a class="card-link" data-toggle="collapse" href="#collapseA"&gt;
               Colour map 
             &lt;/a&gt;
        &lt;!-- Ultimately add collapse all here as https://codepen.io/dominijk/pen/JejNpp--&gt;
      &lt;/div&gt;
      &lt;div id="collapseA" class="collapse show" data-parent="#accordion3"&gt;
        &lt;div class="card-body" id=menu&gt;
          &lt;fieldset&gt;
            &lt;input id='radioOne' type='radio' name='rtoggle' value='radioOne'&gt;
            &lt;label for='radioOne'&gt;One&lt;/label&gt;&lt;br&gt;
            &lt;input id='radioTwo' type='radio' name='rtoggle' value='radioTwo'&gt;
            &lt;label for='radioTwo'&gt;Two&lt;/label&gt;&lt;br&gt;
            &lt;input id='radioThree' type='radio' name='rtoggle' value='radioThree' checked='checked'&gt;
            &lt;label for='radioThree'&gt;Three&lt;/label&gt;&lt;br&gt;
          &lt;/fieldset&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
     &lt;div id="accordion2"&gt;
     &lt;div class="card"&gt;
     &lt;div class="card-header collapse show"&gt;
     &lt;a class="collapsed card-link" data-toggle="collapse" href="#collapseB"&gt;  
      Filter features by
      &lt;/a&gt;
      &lt;ul class="nav nav-tabs"&gt;
            &lt;li class="collapsed card-link"&gt;&lt;a class="nav-link" data-toggle="tab" 
      href="#tab-1" role="tab"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
      &lt;li class="nav-item"&gt;&lt;a class="nav-link" data-toggle="tab" href="#tab- 
     2" role="tab"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
            &lt;li class="nav-item"&gt;&lt;a class="nav-link" data-toggle="tab" href="#tab-3" role="tab"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id="collapseB" class="card card-tabs-1" data-parent="#accordion2"&gt;
            &lt;div class="card-block"&gt;
              &lt;div class="tab-content"&gt;
                &lt;div class="tab-pane active" id="tab-1" data-parent="#accordion2"&gt;
                  &lt;h4 class="card-title"&gt;Tab 1&lt;/h4&gt;
                  &lt;p class="card-text"&gt;Content.&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="tab-pane" id="tab-2"&gt;
                  &lt;h4 class="card-title"&gt;Tab 2&lt;/h4&gt;
                  &lt;p class="card-text"&gt;Content.&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="tab-pane" id="tab-3"&gt;
                  &lt;h4 class="card-title"&gt;Tab 3&lt;/h4&gt;
                  &lt;p class="card-text"&gt;Content&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-header"&gt;
          &lt;a class="collapsed card-link" data-toggle="collapse" href="#collapseC"&gt;
               Show boundaries for
             &lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="collapseC" class="collapse" data-parent="#accordion2"&gt;
          &lt;div class="card-body"&gt;
            Card content can be &lt;br&gt;
            &lt;span&gt; span &lt;/span&gt;
            &lt;div&gt; div &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-header"&gt;
          &lt;a class="collapsed card-link" data-toggle="collapse" href="#collapseD"&gt;
               Another panel
             &lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="collapseD" class="collapse" data-parent="#accordion2"&gt;
          &lt;div class="card-body"&gt;
            Card content can be &lt;br&gt;
            &lt;span&gt; span &lt;/span&gt;
            &lt;div&gt; div &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>