Accordion with collapsible nav tabs

Bootstrap 4 accodion panels with nav tab in panel that responds to collapse

by k_sav

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></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...

JavaScript

$(document).ready(function() {

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