JSFiddle - React, Tailwind, and code Playground

by userdude

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href="#div1">Div1</a></li>
        <li><a href="#div2">Div2</a></li>
        <li><a href="#div3">Div3</a></li>
    </ul>
    <div id="div1" class="content"><p>DIV 1</p></div>
    <div id="div2" class="content"><p>DIV 2</p></div>
    <div id="div3" class="content"><p>DIV 3</p></div>
</div>

CSS

.ui-tabs-panel.content {
    background: orange;
    color: white;
}

JavaScript

$(document).ready(function() {
    $('.content').each(function(i, el){
        var $p = $(el).find('p'),
            $wrapper = $('<div/>');
        for (var i = 0; i < 10; i++) {
            $wrapper.append($p.clone());
        }
        $(el).empty().append($wrapper);
    });
    $("#tabs").tabs({
        show: function(event, ui) {
            var $target = $(ui.panel);
            $('.content:visible').effect(
                'explode', 
                {}, 
                1500, 
                function(){
                    $target.fadeIn();
            });
        }
    });
});