acordeon bootstrap.html

 <div class="container">
        <h4>Haciendo un acordeón con Bootstrap 3.3.6</h4>

        <div class="panel-group" id="collapse">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#collapse" href="#seccion1">
                            Sección 1
                        </a>
                    </h4>
                </div>
                <div id="seccion1" class="panel-collapse collapse in">
                    <div class="panel-body">
                        Aquí yo puedo colocar todo el texto que quiera.
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#collapse" href="#seccion2">
                            Sección 2
                        </a>
                    </h4>
                </div>
                <div id="seccion2" class="panel-collapse collapse">
                    <div class="panel-body">
                        También puedo colocar controles:
                        <input type="button" class="btn btn-success" value="Presionar" />

                        <ul class="list-group">
                            <li class="list-group-item">También coloco list groups</li>
                            <li class="list-group-item list-group-item-danger">Danger</li>
                            <li class="list-group-item list-group-item-success">Success</li>
                            <li class="list-group-item list-group-item-warning">Warning</li>
                        </ul>

                    </div>
                </div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#collapse" href="#seccion3">
                            Sección 3
                        </a>
                    </h4>
                </div>
                <div id="seccion3" class="panel-collapse collapse">
                    <div class="panel-body">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th> Columna 1</th>
                                    <th> Columna 2</th>
                                    <th> Columna 3  </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Valor1</td>
                                    <td>Valor2</td>
                                    <td>Valor3</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>