Tabs

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="ajax-content.html">AJAX Tab</a></li>
  </ul>
  <div id="tabs-1"><p>Static content 1.</p></div>
  <div id="tabs-2"><p>Static content 2.</p></div>
</div>

<script>
$("#tabs").tabs({
  active: 0,
  collapsible: false,
  event: "click",
  heightStyle: "auto",
  beforeLoad: function(event, ui) {
    ui.jqXHR.fail(function() {
      ui.panel.html("Failed to load content.");
    });
  },
  activate: function(event, ui) {
    console.log("Switched to tab:", ui.newTab.index());
  }
});

// Programmatic tab switch
$("#tabs").tabs("option", "active", 2);
</script>