基于BootStrap的Collapse折叠(包含回显展开折叠的对应状态)

情况描述：为了改善页面上的input框太多，采用∧∨折叠展开，这个小东西来控制，第一次做，记录一下ヾ(◍°∇°◍)ﾉﾞ下边是Code

代码：

//html代码
 <div id="collapseTwo" class="panel-collapse collapse">
     //想要被折叠起来的代码
     //就使劲往这里放
     //就对了
 </div>
 <div class="col-md-1" style="float: right; margin-top: 2px">
    <div data-toggle="collapse" data-parent="#accordion" onclick="clickCollapse()"
         href="#collapseTwo">
        <div id="open">
           <img th:src="@{/assets-new/apps/img/zhankai.png}" title="展开"/><a>展开</a>
        </div>
        <div id="close" hidden="hidden">
            <img th:src="@{/assets-new/apps/img/shouqi.png}" title="关闭"/><a>收起</a>
        </div>
    </div>
 </div>
//js代码
<script type="text/javascript">
　function clickCollapse() {
    $('#open').toggle("fast");
    $('#close').toggle("fast");
  }
</script>

//js代码 根据折叠展开状态，页面回显与之对应的状态(发送异步请求时候)

$("#search").click("click", function () {
    var state = $('#collapseTwo').hasClass('in');
    var url = rootPath + "vrx/vouxxXxx/list";
    if (state == true) {
        url += "?panelState=open"
    } else {
        url += "?panelState=close"
    }
    $("#searchForm").ajaxSubmit({
        url: url,
        async: true,
        success: function (data) {
            var tb = $("#loadhtml");
            var topliHtml = $("#topli").html();
            tb.html(CommnUtil.loadingImg());
            tb.html(data);
            $("#topli").html(topliHtml);
        }
    });
});

//后台java
String state = this.getRequest().getParameter("panelState");
map.addAttribute("state",state);
return VIEW_PATH + "/list";

//list.html页面里的js
<script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
    var state = [[${state}]];
    if (CommnUtil.notNull(state)) {
        if (state == "open") {
            $('#collapseTwo').collapse('show');
            $('#open').toggle("fast");
            $('#close').toggle("fast");
        }
    }
</script>

说明：就这么多代码，说实话，关于引入的js什么的我还是不太会找正确的好用的链接Σ(☉▽☉"a丧！