Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
$(function() { $(".tab-btn").on("click", function() { const target = $(this).data("tab"); $(".tab-btn").attr("aria-selected", "false").removeClass("active"); $(".tab-panel").hide().attr("hidden", ""); $(this).attr("aria-selected", "true").addClass("active"); $("#" + target).show().removeAttr("hidden"); }); // Activate first tab $(".tab-btn:first").trigger("click"); }); /* HTML: <button class="tab-btn" data-tab="panel1" role="tab" aria-selected="false">Tab 1</button> <div id="panel1" class="tab-panel" role="tabpanel">Content</div> */
Result
Open