JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<span id="error_message" class="error_msge">
</span>
<div> </div>
<form autocomplete="off" class="educationForm" name="educationForm" id="educationForm" method="POST" action="#">
<div class="container-fluid">
<div class="row-fluid">
<div class="header">
<div class="row">
<div class="col-xs-10 col-sm-11 col-md-11 pad-top"> <span class="info_txt">Work experience</span>
</div>
<div class="col-xs-2 col-sm-1 col-md-1"> <a id="expand" class="expand" href="#"><div id="ico" class="pull-right minus minus_pos1"></div></a>
</div>
</div>
</div>
<div id="collapse" class="body toggle">
<div class="container-fluid cloned_row">
<!-- first row-fluid-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 emprad empexp">
<label>Are you currently employed</label>
<input type="radio" class="wrk_clp rad_emp" id="rad_emp" value="yes" name="rad_emp" />Yes
<input type="radio" class="wrk_clp wrk_clpn" id="rad_emp" checked value="no" name="rad_emp" />No</div>
</div>
<!-- Second row-fluid-->
<div id="expy" class="wrk_exp expy cloned-row3">
<div class="row text">
<div class="col-xs-6 col-sm-6 col-md-3...
JavaScript
$(document).ready(function () {
var $errorMessageDiv = $("#error_message"),
$expDiv = $("#expy");
$expDiv.hide();
$errorMessageDiv.hide();
$('.error_msge').hide();
apply_validation();
$(".expand").click(function () {
var state = $(this).children("div").hasClass("minus");
if (state == true) {
$(this).children("div").addClass("plus");
$(this).children("div").removeClass("minus");
} else {
$(this).children("div").removeClass("plus");
$(this).children("div").addClass("minus");
}
$(this).parents(".header").next("#collapse").toggle();
});
$(".wrk_clp").click(function () {
if ($('input[name=rad_emp]:checked').val() == "yes") {
$expDiv.show();
}
if ($('input[name=rad_emp]:checked').val() == "no") {
var cnfrm = confirm('Sure?');
if (cnfrm == true) {
$expDiv.hide();
$(".txt_Jbt,.txt_Empl,.startDate,.endDate").val("");
update_errors();
} else {
$expDiv.show();
update_errors();
}
$(".exp_add").remove();
$(".years_lab").text('');
//$(".expy").css("display", "none");
$(".wrk_exp").find('.required_field').removeClass("errRed");
update_errors();
}
});
function apply_validation() {
$(".educationForm").validate({
ignore:".chk_Field",
onkeyup: false,
showErrors: function (errorMap, errorList) {
var errors = this.numberOfInvalids();
if (errors) {
var message = 'You have missed ' + errors + ' fields. Please fill before submitted.';
$errorMessageDiv.html(message);
$errorMessageDiv.show();
} else {
$errorMessageDiv.hide();
}
...