CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
mapping dom
mapping dom

Reputation: 1955

Bootstrap 4 getting nav tabs to collapse with card accordion

As this fiddle https://jsfiddle.net/dominijk/bLpach25/1/

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.

What i want to do is link the nav tab to the card collapse

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. 

    <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>

Upvotes: 1

Views: 4305

Answers (1)

ksav
ksav

Reputation: 20840

$(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

Upvotes: 1

Related Questions