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 type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion" id="cplace" onclick="document.getElementById('col').style.display = 'inline'">form4</button>
                </td>
                <tr>
                    <td colspan="2" style="display:none;" id="col">
                        <div id="form1" class="collapse">
                            <form method="POST" action="updatepassc.php" novalidate="novalidate" id="1">
                                <div class="form-group">
                                    <label for="oldpassword" class="control-label ">1:</label>
                                    <input type="password" class="form-control" id="oldpassword" name="oldpassword"> <span class="help-block"></span>

                                </div>
                                <div class="form-group">
                                    <label for="newpassword"...

JavaScript

$(document).ready(function () {
    $('#cpass').click(function () {
        $('#form2,#form3,#form4').hide();
        $('#form1').fadeIn();
        
    });
    $('#cinfo').click(function () {
        $('#form1,#form3,#form4').hide();
        $('#form2').fadeIn(); 
        
    });
    $('#cmail').click(function () {
        $('#form4,#form2,#form1').hide();
        $('#form3').fadeIn();
         
    });
    $('#cplace').click(function () {
        $('#form3,#form2,#form1').hide();
        $('#form4').fadeIn();
        
    });
});