JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<div id="tabs">
        <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>
            <li><a href="#tabs-3">Tab 3</a></li>
        </ul>

        <div id="tabs-1"><p>Container 1</p></div>
        <div id="tabs-2"><p>Container 2</p></div>
        <div id="tabs-3"><p>Container 3</p></div>
    </div>
    
    <p><a id="clicktab2" href="#">click for tab 2</a></p>

JavaScript

$(document).ready(function() {
          $("#tabs").tabs();

          // assume you want to change to the 3rd tab after 3 seconds
          /*setTimeout(function() {
              $("#tabs").tabs("option", "active", 2);
          }, 3000);*/
          
          $('#clicktab2').click(function(){
          		$("#tabs").tabs("option", "active", 1);
          });
    });