JSFiddle - React, Tailwind, and code Playground

by davidmurdoch

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <div id="tabs"> 
        <ul> 
            <li> 
                <a href="#tab1">Tab 1</a> 
            </li> 
            <li> 
                <a href="#tab2">Tab 2</a> 
            </li> 
        </ul> 
        <div id="content-container" style="border:1px solid black"> 
            <div id="tab1">Tab 1 content</div> 
            <div id="tab2">Tab 2 content</div> 
        </div> 
    </div> 
    <a href="#" id="add3">Add tab 3 at index 0 (correct behavior)</a> 
    <br /> 
    <a href="#" id="add4">Add tab 4 to end of tab list(incorrect behavior)</a>

CSS

/*
 * jQuery UI CSS Framework 1.8.12
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
 * jQuery UI CSS Framework 1.8.12
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit...

JavaScript

$(function(){
    $('#tabs').tabs();
    
    $('#add3').click(function(){
        $('<div id="tab3">Tab 3 content</div>').css('border', '1px solid green').appendTo($('#content-container'));
        $('#tabs').tabs('add', '#tab3', 'Tab 3', 0);
        return false;
    });
    $('#add4').click(function(){
        $('<div id="tab4">Tab 4 content</div>').css('border', '1px solid red').appendTo($('#content-container'));
        $('#tabs').tabs('add', '#tab4', 'Tab 4');
        return false;
    });
});