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;...

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: "fade", duration: 500 },
                hide: { effect: "fade", 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");
                 }
             });
        });