Bootstrap 4 заставляет навигационные вкладки разрушаться с помощью гармошки

Question

Как эта скрипка https://jsfiddle.net/dominijk/bLpach25/1/

У меня есть ряд карт в гармошке, которые рушатся, когда открывается другая карта. Я могу заставить вкладки сидеть внутри карты и функционировать как вкладки.

Что я хочу сделать, это связать вкладку навигации с коллапсом карты

т. Если вы щелкнете по вкладке навигации, отобразится содержимое вкладки, а другие карты свернутся, и наоборот, если открыта другая карта, содержимое вкладки должно свернуться.

    <div id="accordion3">
    <div class="card">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" href="#collapseA">
             Colour map 
           </a>
      <!-- Ultimately add collapse all here as 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>

Answer 1

$(document).ready(function() {

  $('.nav-link').on('click', function() {
    if (!$('#collapseB').hasClass('show')) {
      $('#collapseB').collapse('toggle')
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
</script>
<div id="accordion3">
  <div class="card">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" href="#collapseA">Colour map</a>
    </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 class="card">
    <div class="card-header ">
      <a class=" card-link" data-toggle="collapse" href="#collapseB">
         Filter features by
       </a>
      <ul class="nav nav-tabs" id="features">
        <li class=" 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 collapse" data-parent="#accordion3">
        <div class="card-block">
          <div class="tab-content">
            <div class="tab-pane active" id="tab-1">
              <h4 class="card-title">Tab 1</h4>
              <p class="card-text">Libero at quibusdam autem magnam necessitatibus, ullam nisi quo, architecto molestias reprehenderit neque porro velit deleniti ipsa mollitia pariatur! Expedita, eius repudiandae.</p>
            </div>
            <div class="tab-pane" id="tab-2">
              <h4 class="card-title">Tab 2</h4>
              <p class="card-text">Magni autem a perferendis tempore perspiciatis aspernatur sapiente fuga deserunt dignissimos consequuntur maiores aliquid hic, in pariatur, officiis repellat voluptatum provident blanditiis.</p>
            </div>
            <div class="tab-pane" id="tab-3">
              <h4 class="card-title">Tab 3</h4>
              <p class="card-text">Odio, facilis, vel eum nam architecto maxime consequuntur consectetur et qui eveniet alias minus provident suscipit delectus odit cupiditate similique fuga vero!</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="#accordion3">
      <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="#accordion3">
      <div class="card-body">
        Card content can be <br>
        <span> span </span>
        <div> div </div>
      </div>
    </div>
  </div>


</div>

Fiddle