JSFiddle - React, Tailwind, and code Playground

by Gaurav Singh

HTML

<section class="widget" id="widget-1">
    	<h4>Contact Us</h4>

    <form class="contact-form collapse" role="form">
        <input type="text" class="form-control" placeholder="Name">
        <input type="text" class="form-control" placeholder="Email">
        <input type="text" class="form-control" placeholder="Phone Number">
        <textarea class="form-control" placeholder="Question"></textarea>
        <button type="submit">Submit</button>
    </form>
</section>
<!-- widget-1 -->

CSS

#widget-1 h4 {
    cursor: pointer;
}
#widget-1 form {
    display:none;
}

JavaScript

$('#widget-1 h4').click(function () {
    if ($('#widget-1 form').is(":hidden")) {
        $('.contact-form').slideDown('slow');
    } else {
        $('#widget-1 form').slideUp('slow');
    }
});