<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>

        $(function () {
            $('#collapseThree').collapse('toggle');
            $('#collapseOne').collapse('hide');
            $('#collapseTwo').collapse('show');
            $('#collapseFor').collapse({toggle: false});

            $('#collapseTwo').on("show.bs.collapse",function () {
                alert("在调用 show 方法后触发该事件。");
            });
            $('#collapseTwo').on("shown.bs.collapse",function () {
                alert("当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。");
            });
            $('#collapseTwo').on("hide.bs.collapse",function () {
                alert("当调用 hide 实例方法时立即触发该事件。");
            });
            $('#collapseTwo').on("hidden.bs.collapse",function () {
                alert("当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。");
            });

        });

    </script>
</head>
<body>
<div class="panel-group" id="accordion">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">
                点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
            lomo.
        </div>
    </div>
</div>

<div class="panel panel-success">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#collapseTwo" data-parent="#accordion" data-toggle="collapse">
                点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法
            </a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
            lomo.
        </div>
    </div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#collapseThree" data-parent="#accordion" data-toggle="collapse">
                点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法
            </a>
        </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
            lomo.
        </div>
    </div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#collapseFor" data-parent="#accordion" data-toggle="collapse">
                点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法
            </a>
        </h4>
    </div>
    <div id="collapseFor" class="panel-collapse collapse">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
            lomo.
        </div>
    </div>
</div>
</div>


</body>
</html>