JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<button class="btn" id="add_facility">
<i class="fa fa-plus" aria-hidden="true"></i>
Add Facilities
</button>
<div class="facility-form">
<form id="facility-form1">
<div class="row">
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Internet
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Wifi
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Bar
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Free Wifi
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Spa
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Parking
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Indoor Pool
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Family Rooms
</label>
</div>
<div class="checkbox">
<label>
<input...
CSS
.facility-form {
background-color: #e3edfa;
padding: 4px;
cursor: initial;
display: none;
}
JavaScript
$(document).ready(function () {
$("#add_facility").click(function () {
//debugger;
$(".facility-form").toggle('slow');
});
});