JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="tabs" class="tabs-bottom">
    <ul>
        <li><a href="#tabs-1">RIGHT TAB 1</a></li>
        <li><a href="#tabs-2">RIGHT TAB 2</a></li>
    </ul>
    <div id="tabs-1">
        <span style="cursor:pointer" onclick="$.addTab();">PRESS HERE TO ADD TAB</span>
    </div>
    <div id="tabs-2">
        <!-- This is what throws things off. Remove it and the problem is gone. -->
        <ul>
            <li><a href="deny.html">FOOBAR</a></li>
        </ul>
    </div>
</div>

JavaScript

var tabs = $("#tabs").tabs();

// move the nav to the bottom
$(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");

$.addTab = function (nazwa, url, ctx) {
    tabs.find(".ui-tabs-nav").append('<li><a href="/echo/html">New Tab</a</li>');
    
    tabs.tabs("refresh");
}