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

Question

I am trying to create bootstrap accordion in craft website on my faq page how can I achieve that with entries?

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 %}