Bootstrap 4 Accordion with Matrix (and SuperTable)

Question

I'm attempting to use a combination of SuperTable and Craft's Matrix to create a reusable Bootstrap 4 Accordion element, but I'm hitting a wall.

My code so far:

{% for row in entry.contentBuilder.all() %}
    {% for block in row.components.all() %}
        {% switch block.type.handle %}
            {% case 'accordion' %}
                 <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="accordion" id="accordion">
                                <div class="card">
                                    <div class="card-header" id="heading{{ loop.index }}">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{ loop.index }}" aria-expanded="true" aria-controls="collapse{{ loop.index }}">
                                                {{ block.accordionTitle }}
                                            </button>
                                        </h5>
                                    </div>

                                    <div id="collapse{{ loop.index }}" class="collapse {{ loop.first ? 'show' }}" aria-labelledby="heading{{ loop.index }}" data-parent="#accordion">
                                        <div class="card-body">
                                            {{ block.accordionCopy }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        {% endswitch %}
    {% endfor %}
{% endfor %}

The above is obviously producing several container divs, and not the desired card divs. I've hit a snag attempting to go several layers deep with for loop nesting and if conditionals to get it right, but it's messy and nothings come worked so far.

Essentially, the idea is that my SuperTable field contentBuilder is added to the Entry layout, so that a user can create several rows and have content types to pick from. In contentBuilder is a row (field) called components, of which accordion is a Matrix field. None of this would even be necessary if Neo was ported to Craft 3 :/ I'd worked out a perfect content builder with Neo before.

Anyone have any ideas how to go about this?

Answer 1

I'd break up the forloops a bit so you're outputting the panel container and the accordion wrapper markup once. Then for each accordion (supertable row) you're outputting that markup as many times as it's needed.

I haven't used Bootstrap JS packages for a long time, so I was a bit thrown by the amount of divs you have. (I use this accordion package for how simple it is. It's an oldie, but a goodie and is still being maintained.)

{# Matrix loop of blocks #}
{% for row in entry.contentBuilder.all() %}

    {% switch block.type.handle %}
    {% case 'accordion' %}

         <div class="container">
             <div class="row">
                 <div class="col-md-12">
                     <div class="accordion" id="accordion">

                         {# Supertable loop of accordions #}
                         {% for block in row.components.all() %}

                             <div class="card">
                                 <div class="card-header" id="heading{{ loop.index }}">
                                     <h5 class="mb-0">
                                         <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{ loop.index }}" aria-expanded="true" aria-controls="collapse{{ loop.index }}">
                                              {{ block.accordionTitle }}
                                          </button>
                                     </h5>
                                 </div>

                                 <div id="collapse{{ loop.index }}" class="collapse {{ loop.first ? 'show' }}" aria-labelledby="heading{{ loop.index }}" data-parent="#accordion">
                                     <div class="card-body">
                                         {{ block.accordionCopy }}
                                     </div>
                                 </div>
                             </div>

                        {% endfor %}

                    </div>
                </div>
            </div>
        </div>
    {% endswitch %}
{% endfor %}