根据所选按钮折叠按钮

Question

我有一组3个按钮（使用Bootstrap）。它们按照预期进行扩展，但是当我选择其中一个按钮时，我试图找出如何折叠它们。基本上只有一个按钮（以及它的相应部分）应该在任何给定的时间打开。

    <div class="row">
    <div class="col-md-7 col-lg-7 col-xl-7 col-sm-7 col-xs-9">
        <div class="well well-filter col-md-7 col-lg-5 col-xl-5 col-sm-7 col-xs-9">
            <div class="form-group">

                <button href="#All" class="btn btn-primary btn-block active" data-toggle="collapse">All Loans</button>

                <button href="#Submitted" class="btn btn-primary btn-block active" data-toggle="collapse">Date Submitted</button>
                <div id="Submitted" class="collapse">
                    <div class="form-group">
                        <label class="control-label col-sm-5 col-lg-5 col-md-5" for="submitted">Beginning Date:</label>
                        <div class="col-sm-7 col-lg-7 col-md-7">
                            <input type="date" class="form-control" id="submit-beg-date" placeholder="Beginning Date">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-5 col-lg-5 col-md-5" for="submitted">Ending Date:</label>
                        <div class="col-sm-7 col-lg-7 col-md-7">
                            <input type="date" class="form-control" id="submit-end-date" placeholder="End Date">
                        </div>
                    </div>
                </div>

                <button href="#Funded" class="btn btn-primary btn-block active" data-toggle="collapse">Date Funded</button>
                <div id="Funded" class="collapse">
                    <div class="form-group">
                        <label class="control-label col-sm-5 col-lg-5 col-md-5" for="funded">Beginning Date:</label>
                        <div class="col-sm-7 col-lg-7 col-md-7">
                            <input type="date" class="form-control" id="funded-beg-date" placeholder="Beginning Date">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-5 col-lg-5 col-md-5" for="funded">Ending Date:</label>
                        <div class="col-sm-7 col-lg-7 col-md-7">
                            <input type="date" class="form-control" id="funded-end-date" placeholder="End Date">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>