JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<form id="myForm" method="POST" action="#">
    <label for="mce-MMERGE1-state">Name:</label>
    <input type="text" value="" maxlength="20" name="MMERGE1[name]" id="mce-MMERGE1-name" class="required"><br>
    <div id="accordionup">
        <input type="checkbox" id="show_extra" />
        <label for="show_extra">Show extra ?</label>
    </div>
    
    <div id="accordion" style="display: none;">
        <div class="mc-address-group">
            <label for="mce-MMERGE1-state">State:</label>
            <input type="text" value="" maxlength="20" name="MMERGE1[state]" id="req_mce-MMERGE1-state"><br>
            <label for="mce-MMERGE1-zip">Zip Code:</label>
            <input type="text" value="" maxlength="10" name="MMERGE1[zip]" id="mce-MMERGE1-zip"/><br>
            <label for="mce-MMERGE1-country">Country:</label>
            <input type="text" value="" maxlength="10" name="MMERGE1[country]" id="req_mce-MMERGE1-country"/>
        </div>
    </div>
    <input type="submit" value="Submit">
</form>

JavaScript

$('#show_extra').change(function() {
    $("#accordion").slideToggle("slow");
    $(".mc-address-group input[id^=req_]").each(function() {
        $(this).toggleClass('required');
    });
});


$("#myForm").validate({
    submitHandler: function() {
        alert('it validated !');
    }
});