📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials jQuery in Practice Tabs Widget

Tabs Widget

5 min read
Build tabs by showing one panel and hiding others when a tab is clicked. Apply an active class to the selected tab. Update the URL hash on click so tabs are bookmarkable and load from the hash on page load.

Building Tabs

$('#tabs a').on('click', function(e) {
  e.preventDefault();
  const target = $(this).attr('href');

  // Activate tab
  $('#tabs a').removeClass('active');
  $(this).addClass('active');

  // Show panel
  $('.panel').hide();
  $(target).fadeIn(200);
});

// Activate first tab
$('#tabs a:first').trigger('click');