bootstrap3手风琴效果解析

首先它是基于组件面板做的。

最简代码示例

<div class="panel-group" id="accordion">


                        <div class="panel panel-default" >

                            <div class="panel-heading">

                                <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
                                   href="#collapse1">
                                    item1
                                </a>
                            </div>

                            <div id="collapse1" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div>这是选项卡一的展开内容</div>
                                </div>
                            </div>

                        </div>

                        <div class="panel panel-default">

                            <div class="panel-heading">
                                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                                    item2
                                </a>
                            </div>

                            <div id="collapse2" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div>这是选项卡2的展开内容</div>
                                </div>
                            </div>

                        </div>


                    </div>

data-parent="#accordion"，比如要指定父级，其次每个item必须包裹在panel中否则不会出现手风琴效果