JSFiddle - React, Tailwind, and code Playground

by jhegeduis

HTML

<!-- Source Fi -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssbase/cssbase-min.css">
<div class="yui3-skin-mine">
<div id="first">
    <form id="userFirstPage" aciton="someAction.action" method="POST">
        <label for="requestId">Request Id</label>
        <input type="text" id="requestId"/><br/>
        
        <label for="requestType">Type of Request</label>
        <input type="text" id="requestType"/>
        <label for="date">Date</label>
        <input type="text" id="date"/><br/>
        
        <label for="sysApp">System/Appication</label>
        <input type="text" id="sysApp"/>
        <label for="location">location</label>
        <input type="text" id="location"/><br/>
        
        <label for="firstName">first name</label>
        <input type="text" id="firstName"/>
        <label for="lastName">last name</label>
        <input type="text" id="lastName"/><br/>
        
        <button id="firstButton">Submit</button>
    </form>
    
</div>

<div id="second"  class="yui3-accordion">HI I"M SECOND DIV</div>
</div>

CSS

/* autocomplete-list-core.css ****************************************************/
.yui3-aclist {
    position: absolute;
    z-index: 1;
}

.yui3-aclist-hidden { visibility: hidden; }

.yui3-aclist-aria {
    /* Hide from sighted users, show to screen readers. */
    left: -9999px;
    position: absolute;
}

.yui3-aclist-list {
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.yui3-aclist-item {
    cursor: pointer;
    list-style: none;
    padding: 0.2em 0.5em; /*2px 5px;*/
}

.yui3-aclist-item-active { outline: #afafaf dotted thin;
}

/* autocomplete-list-skin.css   (sam) ****************************************************/
.yui3-skin-mine .yui3-aclist-content {
    background-color: #f1f3f9;
    border: solid 1px #e6eaf4;
    color: #344579;
    -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.58);
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.58);
    box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.15);
}

.yui3-skin-mine .yui3-aclist-item-hover {
    background-color: #d8ddee;
    color: #273259;
}

.yui3-skin-mine .yui3-aclist-item-active {
    background-color: #b0bcdd;
    color: #020204;
    outline: none;
}

/*  ****************************************************/
/*  ****************************************************/


.yui3-skin-mine .yui3-button {
    /* Structure */
    display: inline-block;
    *display: inline; /*IE 6/7*/
    zoom: 1;
    font-size: 100%;
    *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/
    *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
    padding: 0.39em 1em 0.44em; /*0.4em 1em 0.45em;*/
    line-height: normal;
    white-space: nowrap;
    vertical-align: baseline;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    /* Presentation */
    /*color: #444;  rgba not supported (IE 8) */
    /*color: rgba(0, 0, 0, 0.80);  rgba...

JavaScript

YUI().use('node','json-parse', 'event', 'gallery-accordion', function (Y) {
    // The Node and Event modules are loaded and ready to use.
    // Your code goes here!
    
    // Hide the divs and only shwo the step one
    var divOne = Y.one("#first");
    var divTwo = Y.one("#second");
    
    
    // Get the json string; parse and populate the form
    // For now make up a string
    var stepOneJsonString = '{"request" : [{"requestId":"REQUEST.CAPS.20130219","firstName":"jerry","lastName":"hegeduis","requestType":"INITIAL","date":"2/19/2013","sysApp":"CAPS","location":"DECC-ST LOUIS"}]}';
  
    try{
    var data = Y.JSON.parse(stepOneJsonString);
    } catch (e) {
     alert(e);   
    }
   
    // only one request element here so grab it from array
    var r = data.request[0];
    
    Y.one("#requestId").set('value', r.requestId);
    Y.one("#requestType").set('value', r.requestType);
    Y.one("#firstName").set('value', r.firstName);
    Y.one("#lastName").set('value', r.lastName);
    Y.one("#sysApp").set('value', r.sysApp);
    Y.one("#location").set('value', r.location);
    Y.one("#date").set('value', r.date);
    
    var stepOneButton = Y.one('#firstButton');
    
    
   accordion = new Y.Accordion({
        srcNode: "#second",
        useAnimation: true,
        collapseOthersOnExpand: true
    });
 
    
 
    item1 = new Y.AccordionItem( {
        label: "Item1, added from script",
        expanded: true,
        id: "dynamicItem1",
        contentHeight: {
            method: "fixed",
            height: 80
        },
        closable: true
    } );
 
    item1.set( "bodyContent", "This is the body of the item, added dynamically to accordion.<br>Content height has been set as \"fixed, 80px\"." );
 
    accordion.addItem( item1 );
 
    item2 = new Y.AccordionItem( {
        label: "Item2, added from script",
        expanded: true,
        id: "dynamicItem2",
        contentHeight: {
            method: "stretch"
        }
    } );
 
   ...