我正在尝试获得一个为datatable筛选器工作的切换。 在创建basic按钮时，我可以使用

<a data-toggle="collapse" href="#epdatatable_filter" role="button" aria-expanded="false" aria-controls="epdatatable_filter" class="btn btn-labeled bg-primary">Filters </a>

我的问题是，当我在div内添加一个重置按钮，并设置按钮切换关闭，它做了一个完全不同的风格关闭，然后不会重新打开。 我注意到第一个按钮是如何可以移除显示的:除了重置之外，没有任何一个可以移除显示。

有没有一种方法可以让它工作，或者有没有一种更有效的方法来做它？ 最终的结果是在div中创建一个APPLY和RESET按钮，这两个按钮随后都将关闭。

我的代码:https://jsfiddle.net/martinhackett/lru4npte/17/

                <div style="float: right"><a data-toggle="collapse" href="#epdatatable_filter" role="button" aria-expanded="false" aria-controls="epdatatable_filter" class="btn btn-labeled bg-primary">Filters </a></div>


                <div class="card collapse" id="epdatatable_filter">
                  <div class="card-header header-elements-inline">
                    <h5 class="card-title">Search</h5>
                  </div>

                  <div class="card-body">
                    <div class="row">
                      <div style="float: right"><a id="epdatatable_filter_reset" role="button" class="btn btn-labeled bg-primary">Reset filters </a></div>

                      <div class="col-xl-3">
                        <label for="searchbox"><b>Name:</b> </label>
                        <div style="padding-bottom: 10px">
                          <input class="form-control filter_reset" type="text" id="searchbox">
                        </div>
                      </div>
                      <div class="col-xl-3">
                        <label for="searchbox1"><b>Email:</b> </label>
                        <div style="padding-bottom: 10px">
                          <input class="form-control filter_reset" type="text" id="searchbox1">
                        </div>
                      </div>
                      <div class="col-xl-3">
                        <label for="searchbox"><b>Telephone:</b> </label>
                        <div style="padding-bottom: 10px">
                          <input class="form-control filter_reset" type="text" id="searchbox2">
                        </div>
                      </div>
                      <div class="col-xl-3">
                        <p id="searchbox3"><label><b>Filter:</b></label><br></p>
                      </div>
                      <div class="col-xl-12">
                        <button id="filter_submit">Apply Filters</button>
                      </div>

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


<script>
$(document).ready(function () {


$('#epdatatable_filter_reset').click(function(){
    $('#epdatatable_filter').toggle();
})

});
</script>