JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="myAccordion">
<table id="edit"
class="table table-striped table-bordered table-hover table-condensed table-nonfluid1 thumbnail">
<tbody>
<tr>
<td width=50%>
<button type="button" class="btn btn-info btn-lg" data-parent="#myAccordion"
id="cpass"
onclick="document.getElementById('col').style.display = 'inline'">form1
</button>
</td>
<td width=50%>
<button type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion"
id="cinfo"
onclick="document.getElementById('col').style.display = 'inline'">form2
</button>
</td>
</tr>
<tr>
<td width=50%>
<button type="button" class="btn btn-info btn-lg" data-parent="#myAccordion"
id="cmail"
onclick="document.getElementById('col').style.display = 'inline'">form3
</button>
</td>
<td width=50%>
<button...
JavaScript
$(document).ready(function () {
$('#cpass').click(function () {
$('#form1').collapse('show');
if ($('#form2').is(':visible'))
$('#form2').collapse('hide');
});
$('#cinfo').click(function () {
$('#form2').collapse('show');
if ($('#form1').is(':visible'))
$('#form1').collapse('hide');
});
$('#cmail').click(function () {
$('#form3').collapse('show');
if ($('#form4').is(':visible'))
$('#form4').collapse('hide');
});
$('#cplace').click(function () {
$('#form4').collapse('show');
if ($('#form3').is(':visible'))
$('#form3').collapse('hide');
});