JSFiddle - React, Tailwind, and code Playground

by niklasvh

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">
<div id="tabs">

   <ul class="tabs-1">
       <li><a href="#tabs-1"> Some Tab </a></li>
   <li><a href="#tabs-2"> Some Tab </a></li>
   <li><a href="#tabs-3"> Some Tab </a></li>
   <li><a href="#tabs-4"> Show All </a></li>
   </ul>



<fieldset id="tabs-1"> Content1 </fieldset>
<fieldset id="tabs-2"> Content 2</fieldset>
<fieldset id="tabs-3"> Content 3</fieldset>
 <fieldset id="tabs-4"> Content4 </fieldset>      
</div>

JavaScript

var user_tabs = $("#tabs").tabs({
    show: function(event, ui) {
        
        if (ui.index == 3) {
            
            $("fieldset[id^='tabs-']").removeClass('ui-tabs-hide');
            $("fieldset[id='tabs-4']").addClass('ui-tabs-hide');
        } 
    }
});