JSFiddle - React, Tailwind, and code Playground

by Corey Frang

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery-ui.css">
<button>delete selected tab</button>
<div id="example">
    <ul>
        <li><a href="#content"><span>Content</span></a></li>
        <li><a href="/gnarf/Pug4a/show"><span>Content 2</span></a></li>
        <li><a href="/gnarf/Pug4a/1/show"><span>Content 3</span></a></li>
        <li><a href="/gnarf/Pug4a/2/show"><span>Content 4</span></a></li>
        <li><a href="/gnarf/Pug4a/999/show"><span>Error Content</span></a></li>
    </ul>
    <div id="content">Static Content</div>
</div>

JavaScript

var opts = {
    // comment out this line - bug goes away
    fx: {
        opacity: 'toggle'
    }
};
var tabs = $("#example").tabs(opts);


$("button").click(function() {
    var id = tabs.tabs('option', 'selected');
    log("Removing " + id);
    tabs.tabs("remove", id);
    log("Selected After " + tabs.tabs('option', 'selected'));
});

function log(str) {
    $("body").append("<div>" + str + "</div>")
}