JSFiddle - React, Tailwind, and code Playground

by nicolapeluchetti

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<div id="wrapper">
    <div id="header">        
        <h1>&nbsp;</h1>
    </div>
    <!-- /header -->
    <ul id="navigation">
        
        
    </ul>
    <div id="main">
        <div id="main-header">
            <h2>Admin</h2>
            
        </div>
        
        <div id="content">
            <div id="content-container">
                
                
                <form name="ftblSubGroupsadd" id="ftblSubGroupsadd" action="tblSubGroupsadd.asp" method="post" enctype="multipart/form-data">
                    <p>
                        <input type="hidden" name="a_add" value="A">
                        <input type="hidden" name="EW_Max_File_Size" value="4000000">
                        
                        <table class="ewTable">
                            <tr>
                                <td width="30%" class="ewTableHeader"><strong>Full Sub-Group Name</strong><span class='ewmsg'>&nbsp;*</span></td>
                                <td class="ewTableAltRow"><span id="cb_x_FullName">
                                    <input type="text" name="x_FullName" id="x_FullName" size="30" maxlength="500" class="required" title=" "></span></td>
                            </tr><tr>
                            <td class="ewTableHeader">Which Parent Group does this sub-group belong to?</td>
                            <td class="ewTableAltRow"><span id="cb_x_ParentGroupID">
                                
                                <select id='x_ParentGroupID' name='x_ParentGroupID' class='required' title=' '><option value=''>Please Select</option><option value='245' selected>Aish Test, aish</option><option value='299'>test, test</option><option value='302'>test, test2</option><option value='305'>test, test2</option><option value='308'>test, test3</option><option value='311'>test, test34</option></select>
                               ...

CSS

/* CSS Reset */

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, th, td {margin: 0; padding: 0; border: 0; outline: none;}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;  
    padding: 0;  
    margin: 0;  
}

ul, ol {
    list-style: none;
}

/* Base */

body {
    background: #f4f4f4 url(../images/background.gif) repeat-x;
    font:  11px Verdana, Arial, Helvetica, sans-serif ;
    color: #333;
    text-align: left;
}

a {    color: #005da0; }
a:hover { text-decoration: none; color: #65b2d9; }
a:active { outline: none; }

.left { float: left; }
.right { float: right; }
.center { text-align: center; }

#wrapper {
    margin: 0 auto;
    min-width: 760px;
    max-width: 1280px;
}

/* Header */

#header {
    margin: 0 20px;
    height: 50px;
    clear: both;
}

#header h1 {
    float: left;
    line-height: 50px;
    height: 50px;
}

#header h1 a {
    font-size: 18px;
    color: #fff;
    text-decoration: none;
}

#head-nav {
    float: right;
    height: 50px;
    color: #fff;
}

#head-nav a {
    line-height: 50px;
    color: #fff;
}

#head-nav .line {
    margin: 0 5px;
    color: #6588b9;
}

/* Navigation */

#navigation {
    clear: both;
    padding: 0 20px;
    margin: 10px 0 0 0;
    height: 25px;
}

#navigation li {
    float: left;
    font-size: 12px;
    line-height: 25px;
    margin: 0 5px 0 0;
    padding: 0 10px;
    background: url(../images/nav-off.gif) repeat-x;
}

#navigation li.current {
    background: #fff;
    border: 1px solid #ccc;
    border-bottom: none;
    font-weight: bold;
}

#navigation li.current a {
    color: #333;
}

#navigation li a {
    color: #fff;
    text-decoration: none;
}

#navigation li a:hover {
    text-decoration: underline;
}

/* Sub Navigation */

#sub-nav {
    clear: both;
    padding: 0 20px;
    height: 30px;
}

#sub-nav li {
    float: left;
    line-height: 30px;
    font-weight: bold;
}

#sub-nav li a {
    margin: 0 10px 0 0;
   ...

JavaScript

$(document).ready(function() {
    $("#ftblSubGroupsadd").validate({
        invalidHandler: function(form, validator) {
            alert('Note, a few mandatory fields remain un-answered. You may have to open some closed boxes');
            $.each(validator.currentElements, function(i, el){
                if(! validator.element(el)){
                    $(el).closest("div[class=inside]").css("display", "block");
                    $(el).closest("div.boxed").removeClass().addClass('box');
                }
            });

        }
    });

    $(document).ready(function() {
        $('div.box> div').show();
        $('div.box> h3').click(function() {
            $(this).next().slideToggle('fast')
        });
        $('div.boxed> div').hide();
        $('div.boxed> h3').click(function() {
            $(this).next().slideToggle('fast')
        })
    });


});