JSFiddle - React, Tailwind, and code Playground
HTML
<!--form to add user -->
<div id="adduserform">
<div id="AUSR_padd"></div>
<form id="AUSR_adduser" name="AUSR_adduser" action="" method="post" class="adduserform">
<fieldset>
<legend id="fld_company">Select Company</legend>
<div id="formMessage">Click again to open</div>
<div id="fld_fld">
<dl>
<dt>
<label for="AUSR_company" class="opt">Company</label>
</dt>
<dd>
<select id="AUSR_company" name="AUSR_company">
<option SELECTED VALUE="">Select a code</option>
<option value="1">DEMO1</option>
<option value="2">DEMO2</option>
<option value="3">DEMO3</option>
<option value="new">NEW</option>
</select>
</dd>
</dl>
<br />
<div id="data">
<dl>
<dt>
<label for="AUSR_companyname" class="opt">Company Name:</label>
</dt>
<dd>
<input id="AUSR_companyname" name="AUSR_companyname" type="text" size="32" maxlength="128" size="32" value = "" />
</dd>
</dl>
<dl>
<dt>
<label for="AUSR_name" class="opt">Full Name:</label>
</dt>
<dd>
<input id="AUSR_name" name="AUSR_name" type="text" size="32" maxlength="128" value = "" />
</dd>
</dl>
<dl>
<dt>
<label for="AUSR_phone">Phone:</label>
</dt>
<dd>
<input id="AUSR_phone" name="AUSR_phone" type="text" size="32" maxlength="128" value = "" />
</dd>
</dl>
<dl>
...
CSS
legend {
background:#00C621; color:#fff;
font:17px/21px Calibri, Arial, Helvetica, sans-serif;
padding:0 10px; margin:-26px 0 -2px -17px;
font-weight:bold; border:1px solid #fff;
border-color:#e5e5c3 #e5e5c3 #e5e5c3 #e5e5c3; cursor: pointer;
}
fieldset.action{
background:#9da2a6;
border-color:#e5e5e5 #797c80 #797c80 #e5e5e5;
}
fieldset{
background:#f2f2e6;
border:1px solid #fff;
border-color:#fff #fff #666661 #fff;
margin: 0 0 30px;
width:470px;
display: block;
}
.adduserform{
width:450px;
font:12px Arial, Helvetica, sans-serif;
color:#777;
background-color:#fff;
font-weight:bold;
padding: 10px;
}
.adduserform label{
display:block;
width:130px;
float:left;
font-weight:normal;
font-size:12px;
padding: 4px 0 0 40px;
z-index:1000;
clear:both;
}
.adduserform inputbox{
float:right;
border:1px solid #ccc;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
width:300px;
height:20px;
clear:both;
padding: 0 0 0 0px;
}
.adduserform textarea{
padding:8px 3px 2px 3px;
margin:2px 0 10px 3px;
border:1px solid #ccc;
}
.adduserform select {
width: 120px;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
outline:none;
}
.addusersubmit{
margin:0px 0 0 3px;
background-color:#42A0FF;
height:24px;
width:100px;
padding:0;
font:17px/21px Calibri, Arial, Helvetica, sans-serif;
font-weight: bold;
border:1px solid #666;
color:#fff;
outline:none;
float:left;
clear:both;
}
#AUSR_padd {
font:12px/17px Arial, Helvetica, sans-serif;
color:#333;
background:#fff;
padding:20px 10px 10px 10px;
}
#formMessage {
display:none;
margin-top: 8px;
color: #999;
}
JavaScript
$(function() {
$("#fld_company").show();
$("#data").hide();
jQuery("#fld_company").live('click', function() {
$("#fld_fld").toggle(1000);
$("#formMessage").toggle(1000);
});
jQuery("#AUSR_company").live('change', function() {
if($(this).val()=="new") {
$("#data").slideDown(1000);
}
});
});