JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel panel-default">
    <div class="panel-body">
        <div class="panel-body">
            <div class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="row row-sm">
                            <div class="col-md-1">
                                <a data-toggle="collapse" href="#my_table_panel" class="collapse-trigger">
                                    <span class="glyphicon glyphicon-menu-right"></span>
                                </a>
                            </div>
                            <div class="col-md-11">
                            </div>
                        </div>
                    </div>
                
                    <div id="my_table_panel" class="panel-collapse collapse">
                        <table class="hidden table">
                            <thead>
                            <th>Col1</th>
                            <th>Col2</th>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

$("body").on("click", ".collapse-trigger", function (event) {
        $(this).children(".glyphicon").toggleClass("glyphicon-menu-right glyphicon-menu-down");
        $(this).closest(".panel").find(".panel-collapse").collapse("toggle");
    });