Bootstrap 4 Collapse nav-tab on click active tab and on page

Profile picture for user1887686
user1887686

Close active nav-tab when nav-link is clicked and when click is done anywhere on the page.

I've tried changing the removeClass from .tab-pane to every possible variation i.e. tabpanel, nav-item, nav-link and just tab with no luck.

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 
$(document).on('click', '.nav-link.active', function() {
  var href = $(this).attr('href').substring(1);
  //alert(href);
  $(this).removeClass('active');
  $('.tab-pane[id="' + href + '"]').removeClass('active');
});
<!-- language: lang-html --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane" id="home" role="tabpanel">A</div>
  <div class="tab-pane" id="profile" role="tabpanel">B</div>
  <div class="tab-pane" id="messages" role="tabpanel">C</div>
  <div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>
<!-- end snippet -->

The output should close the tab when nav-link is clicked on the open tab.

In BS v4, there's a .tab('show') method, but nothing to close tabs, so you're correct that you'll have to manually update the classes and attributes to toggle a panel off.

Your current event listener will only fire when the event is triggered from an click on an active nav item. This can help close the current nav item, but won't do anything to respond to clicks from the document in general.

You'll need another listener at the document level. Then check if you clicked somewhere that wasn't part of the nav, and execute the same code to close the active tab

// listen for clicks to active nav
$(document).on('click', '.nav-link.active', function() {
  hideTab($(this))
});

// listen for clicks everywhere
$(document).on('click', function(e) {
  // if clicked on nav, return
  if ($(e.target).closest(".nav-tabs,.tab-content").length) {return}
  
  // otherwise, off clicks should close nav
  hideTab($('.nav-link.active'))
});

function hideTab($activeNav) {
  // deselect nav item
  $activeNav.removeClass('active').attr('aria-selected', "false")

  // identify tab pane & deselect
  $($activeNav.attr("href")).removeClass('active');
}

Demo in Stack Snippets

<!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-js --> 
// listen for clicks to active nav
$(document).on('click', '.nav-link.active', function() {
  hideTab($(this))
});

// listen for clicks everywhere
$(document).on('click', function(e) {
  // if clicked on nav, return
  if ($(e.target).closest(".nav-tabs,.tab-content").length) {return}
  
  // otherwise, off clicks should close nav
  hideTab($('.nav-link.active'))
});

function hideTab($activeNav) {
  // deselect nav item
  $activeNav.removeClass('active').attr('aria-selected', "false")

  // identify tab pane & deselect
  $($activeNav.attr("href")).removeClass('active');
}
<!-- language: lang-css --> 
body {
 background-color: #fff1d7 !important;
 padding: 15px;
 height: 100vh;
}
.tab-content, 
.nav-tabs {
  background: white;
}
.tab-pane {
  padding: 10px;
}
h2 {
  margin-top: 3em !important;
}
<!-- language: lang-html --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js"></script>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane" id="home" role="tabpanel">Home Info</div>
  <div class="tab-pane" id="profile" role="tabpanel">Profile Info</div>
</div>

<h2>Click Anywhere to Close </h2>
<!-- end snippet -->