如何通过单击按钮创建动态折叠？

Question

我不知道如何通过单击按钮来创建折叠。有人可以帮助我吗？

基本上当我点击 "Add" 按钮时，我会从屏幕上获取数据并创建一条折叠线。

HTML

<div class="col-md-12">
                                    <!-- foreach para accordion-->
                                    <div class="panel-group" id="accordion" style="margin-bottom: 0px !important">
                                        <div class="panel panel-default">
                                            <div class="panel-heading" style="background: white !important">
                                                <h4 class="panel-title">
                                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#IdMotivo">
                                                        Teste Titulo
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="IdMotivo" class="panel-collapse collapse">
                                                <p style="margin-left: 15px">
                                                    Motivo dentro do collapse
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

When I click the button, the collapse with the data below should appear.

Answer 1

这是工作演示：https://jsfiddle.net/usmanmunir/ux06yzeq/36/

要将 div 和数据动态添加到折叠中，只需单击一下即可使用 append()。

Adicionar 上的点击功能：

JS

$('.btn-primary').click(function() {
    $('.collapse').append(`<h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#IdMotivo">
     New Title
   </a>
 </h4><div class="card card-body">Dynamic Line</div>`)
})

希望对您有所帮助。