我如何在工艺网站上用 bootstrap 创建常见问题手风琴？

Question

我正在尝试在我的常见问题解答页面上的手工艺网站中创建 bootstrap 手风琴，我怎样才能通过条目实现它？

Answer 1

First Create Matrix Field for Faqs in the admin section then create subfields for title and description on your faq entry and then follow then add your content in faq page then output the entries with the following code:

{% for Faqs in entry.faqs.all() %}
                <div class="card">
                    <div class="card-header" id="heading{{count}}">
                        <h2 class="mb-0">
                            <button type="button" class="btn btn-link" data-toggle="collapse"  aria-expanded="true" aria-controls="collapse{{count}}"
                            data-target="#collapse{{count}}">
                            <i class="fa fa-plus"></i> {{Faqs.question}}</button>                                   
                        </h2>
                    </div>
                    <div id="collapse{{count}}" class="collapse " aria-labelledby="heading{{count}}"
                     data-parent="#accordionExample">
                        <div class="card-body">
                    {{Faqs.answers}}                        
                     </div>
                    </div>
            
                </div>
                                {% set count= count+1 %}

                {% endfor %} ``

        
      
    
      {% for Faqs in entry.faqs.all() %}
                        <div class="card">
                            <div class="card-header" id="heading{{count}}">
                                <h2 class="mb-0">
                                    <button type="button" class="btn btn-link" data-toggle="collapse"  aria-expanded="true" aria-controls="collapse{{count}}"
                                    data-target="#collapse{{count}}">
                                    <i class="fa fa-plus"></i> {{Faqs.question}}</button>                                   
                                </h2>
                            </div>
                            <div id="collapse{{count}}" class="collapse " aria-labelledby="heading{{count}}"
                             data-parent="#accordionExample">
                                <div class="card-body">
                            {{Faqs.answers}}                        
                             </div>
                            </div>
                    
                        </div>
                                        {% set count= count+1 %}
        
                        {% endfor %}

我如何在工艺网站上用 bootstrap 创建常见问题手风琴？

How can I create faq accordions with bootstrap in craft website?

bootstrap-4

accordion

craftcms