JSFiddle - React, Tailwind, and code Playground

HTML

<div id='MyTabSelector'>
  <ul>
    <li><a href="#tabs-1">Tab 0</a></li>
    <li><a href="#tabs-2">Tab 1</a></li>
    <li><a href="#tabs-3">Tab 2</a></li>
  </ul>
  <div id="tabs-1">
      <a href="#" onclick="$('#MyTabSelector').disableTab(1);">Disable Tab 1</a><br />
      <a href="#" onclick="$('#MyTabSelector').disableTab(1, true);">Hide Tab 1</a>
      <br />
      <a href="#" onclick="$('#MyTabSelector').enableTab(1);">Show/Enable Tab 1</a>
  </div>
  <div id="tabs-2">
    <p>Why is everyone hiding and disabling me?</p>
  </div>
  <div id="tabs-3">
    <p>Tab 2 content</p>     
  </div>
</div>

CSS

/* Comment this rule out to see what happens if you forget to define it (hide wont work) */

li.ui-state-default.ui-state-hidden[role=tab]:not(.ui-tabs-active) {
    display: none;
}

JavaScript

/**
 * jQuery-ui-tab-utils - Utilities to help with the jquery UI tab control
 * Date: 08/20/2013
 * @author Kyle White - [email protected]
 * @version 0.1
 * Built for and tested with jQuery UI 1.9.2
 * License: Use at your own risk and feel free to use this however you want.
 *
 * USAGE: 
 * $('MyTabSelector').disableTab(0);        // Disables the first tab
 * $('MyTabSelector').disableTab(1, true);  // Disables & hides the second tab
 * $('MyTabSelector').enableTab(1);         // Enables & shows the second tab
 * 
 * For the hide option to work, you need to define the following css
 *   li.ui-state-default.ui-state-hidden[role=tab]:not(.ui-tabs-active) {
 *     display: none;
 *   }
 */
(function ($) {
    $.fn.disableTab = function (tabIndex, hide) {

        // Get the array of disabled tabs, if any
        var disabledTabs = this.tabs("option", "disabled");

        if ($.isArray(disabledTabs)) {
            var pos = $.inArray(tabIndex, disabledTabs);

            if (pos < 0) {
                disabledTabs.push(tabIndex);
            }
        }
        else {
            disabledTabs = [tabIndex];
        }

        this.tabs("option", "disabled", disabledTabs);

        if (hide === true) {
            $(this).find('li:eq(' + tabIndex + ')').addClass('ui-state-hidden');
        }

        // Enable chaining
        return this;
    };

    $.fn.enableTab = function (tabIndex) {
                $(this).find('li:eq(' + tabIndex + ')').removeClass('ui-state-hidden');
        this.tabs("enable", tabIndex);
        return this;
        
        /* Old way, not really necessary

        // Get the array of disabled tabs, if any
        var disabledTabs = this.tabs("option", "disabled");

        var pos = $.inArray(tabIndex, disabledTabs);

        // If the tab we want is in the disabled list, remove it
        if (pos > -1) {
            disabledTabs.splice(pos);

            // Remove the hidden class just in case
            $(this).find('li:eq(' +...