JSFiddle - React, Tailwind, and code Playground

by rickjackson

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<select name="effects" id="effectTypes">
    <option value="blind">Blind</option>
    <option value="bounce">Bounce</option>
    <option value="clip">Clip</option>
    <option value="drop">Drop</option>
    <option value="explode">Explode</option>
    <option value="fade">Fade</option>
    <option value="fold">Fold</option>
    <option value="highlight">Highlight</option>
    <option value="puff">Puff</option>
    <option value="pulsate">Pulsate</option>
    <option value="scale">Scale</option>
    <option value="shake">Shake</option>
    <option value="size">Size</option>
    <option value="slide">Slide</option>
    <option value="transfer">Transfer</option>
</select>
<table cellpadding="2" border="0" style="width: 100%;" cellspacing="2">
    <tr>
        <td style="height: 20px;">
            <div id="tabs">
                <ul>
                    <li><a href="#MainTab">Main Tab</a>

                    </li>
                    <li><a href="#ExceptionTab">Exception Tab</a>

                    </li>
                    <li><a href="#AuditList">Audit History</a>

                    </li>
                </ul>
                <div id="MainTab">
                    <div id="accordian">
                        <div id="pnlDistribution" class="group">
                             <h3> Distribution Grid </h3> 
                            <div id="pnlDistributionContent">
                                <div id="Panel1" class="modalPopup">
                                    <div id="innerPanelSplInstructions" class="modalPopup">
                                        <div id="pnlSpecialInstructionsDragHandle" style="height:25px;vertical-align: middle;cursor: move; background-color: #DDDDDD; border: solid 1px Gray; color: Black;...

CSS

body {
    font-family:"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 62.5%;
}
.modalPopup {
    background-color: #DDDDDD;
    width: 100%;
}
.insidedetails1 {
    font-family: Verdana;
    font-size: 15px;
    font-weight: 400;
    color: #002e62;
    padding-left: 10px;
}
.details {
    font-family: Verdana;
    font-size: 15px;
    font-weight: 400;
    color: #002e62;
}
.heading {
    font-family: Verdana;
    font-size: 17px;
    font-weight: 400;
    color: #b2cedc;
}
.insideheading {
    font-family: Verdana;
    font-size: 17px;
    font-weight: 400;
    color: #b2cedc;
    padding-left: 10px;
}

JavaScript

$(function () {
    $("#effectTypes")
        .change(

    function () {
        $("#tabs").tabs("option", "show", {
            effect: $("#effectTypes").val(),
            duration: 500
        });
        $("#tabs").tabs("option", "hide", {
            effect: $("#effectTypes").val(),
            duration: 500
        });
    })

    var tabs = $("#tabs").tabs({
        collapsible: true,
        activate: function (event, ui) {},
        show: {
            effect: "blind",
            duration: 500
        },
        hide: {
            effect: "blind",
            duration: 500
        },
        active: false
    });
    tabs.find(".ui-tabs-nav").sortable({
        axis: "x",
        stop: function () {
            tabs.tabs("refresh");
        }
    });
    $("#accordian")
        .accordion({
        header: "> div > h3",
        collapsible: true,
        active: false
    })
        .sortable({
        axis: "y",
        handle: "h3",
        stop: function (event, ui) {
            // IE doesn't register the blur when sorting
            // so trigger focusout handlers to remove .ui-state-focus
            ui.item.children("h3").triggerHandler("focusout");
        }
    });
});