Bootstrap实现手风琴效果

    <table class="table table-striped">

        <div class="list-group-item" style="padding:10px 15px">
            <div class="row">
                <div class="col-xs-7">标题</div>
                <div class="col-xs-2">时间</div>
                <div class="col-xs-2">作者</div>
                <div class="col-xs-1">操作</div>
            </div>
        </div>

        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <div class="panel-title">
                        <div role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                             aria-expanded="true" aria-controls="collapseOne">
                            <div class="row" style=" font-size: 13px">
                                <u class="col-xs-7">[公告]自然语言技术全线开放</u>
                                <div class="col-xs-2">2018-09-17 10:46:30</div>
                                <div class="col-xs-2">一级管理员</div>
                                <a class="col-xs-1" target="_blank" role="button" href="javascript:void(0);" onclick="deleteLetter(letter_id)" >删除</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        展开内容1
                    </div>
                </div>
            </div>

        </div>

    </table>