Bootstrap - collapsible row - hide show row which we are expanding

问题

I am having one table with list of expanded row My One <tr> is parent and next is child which I am expanding

I want to hide the second row when it is not expanded. Below is the code which I am using I have also added image: The red <tr> I want to hide.. You can also see the expanded <tr> in next rows:

 <tr class="clickable apply-max-width">
    <td class="table-tr1-td1 togglebutton" data-toggle="collapse" data-target="#accordion5"><b aria-hidden="true"><img src="../images/plus.png"/></b></td>
    <td>joed123@yahoo.com</td>
    <td colspan="2">WD154590</td>
    <td>2/1/2017</td>
    <td>Yes</td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td colspan="2">
        <div id="accordion5" class="accordion collapse data-found">

            <table class="table table-striped data-table-inner-disabled div-found">
                <thead>
                    <tr>
                        <th></th>
                        <th class="">Application</th>
                        <th class="">App Role</th>
                        <th>Workflow Status</th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td>
                        <td class="application-User-inv">Portal</td>
                        <td>User</td>
                        <td>Pending Approval</td>
                    </tr>
                    <tr>
                        <td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td>
                        <td class="application-User-inv">SSR</td>
                        <td>User</td>
                        <td>Provisioned</td>
                    </tr>
                </tbody>
            </table>

        </div>
    </td>
    <td></td>
    <td>

    </td>
    <td></td>
</tr>

回答1:

You should try to use JQuery if possible here. That way you can use JS to manage the state of showing / hiding your elements, and you can save the state in your browser.

来源：https://stackoverflow.com/questions/43886146/bootstrap-collapsible-row-hide-show-row-which-we-are-expanding