Syntax error Bootstrap hidden.bs.tab event

Bootstrap hidden.bs.tab event

The hidden.bs.tab event fires when the tab is completely hidden in Bootstrap.

Firsty, show the modal using show method as in the following code snippet −

$(“.nav-tabs a”).click(function(){
  $(this).tab('show');
});

The hidden.bs.tab event fires and an alert generates after the tab hides −

$(‘.nav-tabs a’).on(‘hidden.bs.tab’, function() {
  alert('Previous Tab is hidden now!');
});

You can try to run the following code to implement the hidden.bs.tab event −

Example

Live Demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

<body>
  <div class="container">
    <h2>Web Dev</h2>
    <ul class="nav nav-tabs">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#two">PHP</a></li>
      <li><a href="#three">C#.NET</a></li>
      <li><a href="#four">Ruby</a></li>
      <li><a href="#five">HTML5</a></li>
    </ul>
    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
         <h3>Home</h3>
         <p>This is demo text!</p>
      </div>
      <div id="two" class="tab-pane fade">
        <h3>PHP</h3>
        <p>This is demo text!</p>
      </div>
      <div id="three" class="tab-pane fade">
        <h3>C#.NET</h3>
        <p>This is demo text!</p>
      </div>
      <div id="four" class="tab-pane fade">
        <h3>Ruby</h3>
        <p>This is demo text!</p>
      </div>
      <div id="five" class="tab-pane fade">
        <h3>HTML5</h3>
        <p>This is demo text!</p>
      </div>
   </div>
 </div>

<script>
$(document).ready(function(){
  $(".nav-tabs a").click(function(){
    $(this).tab('show');
  });
  $('.nav-tabs a').on('show.bs.tab', function(){
    alert('New tab will be visible now!');
  });
  $('.nav-tabs a').on('shown.bs.tab', function(){
    alert('New tab is now visible!');
  });
  $('.nav-tabs a').on('hide.bs.tab', function(e){
    alert('Previous tab will hide now!');
  });
  $('.nav-tabs a').on('hidden.bs.tab', function(){
    alert('Previous Tab is hidden now!');
  });
});
</script>

</body>
</html>
Updated on: 2020-06-17T13:37:33+05:30

653 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements