Easy Tabbed Navigation With jQuery

Here is the HTML Markup

<h4 class="single-company-tab-wrapper hide-if-no-js">
  <a class="single-company-tabs" href="#info">Info</a>
  <a class="single-company-tabs" href="#contact">Contact</a>
</h4>
 
<div id="info" class="tab-content">
  <p>Content of info tab</p>
</div>
 
<div id="contact" class="tab-content">
  <p>Content of contact tab</p>
</div>

And here is the jQuery

jQuery( document ).ready( function($){
  $('.tab-content').hide(); // Hide all tabs first
  $('#info').show(); //  Show the default tab
  $('a[href="#info"].single-company-tabs').addClass('active');
  
  $('.single-company-tabs').on( 'click', function(e){
    e.preventDefault();
    tab = $(this).attr( 'href' );
    $('.tab-content').hide();
    $(tab).show();
    $('.single-company-tabs').removeClass('active');
    $('a[href="'+tab+'"].single-company-tabs').addClass('active');
  });
});

Hello, I am Arun Basil Lal. Thank you for reading!

I am a WordPress product developer and creator of Image Attributes Pro. I am passionate about solving problems and travelling the world.