1

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?

  • I've got screenshots of my SuperTable setup I can add above, if that will help give further clarity – Thabang Chukura Aug 30 '18 at 15:03
2

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 %}
| improve this answer | |
  • 1
    Thanks for the answer @Jay. Your above answer would have indeed worked, and is the best approach although it was not Bootstrap 4 accordions. Haha, I think the correct answer is that this is technically impossibly with Bootstrap 4 accordions, SuperTable and Matrix. Consequently, I ported back to Craft 2.7 and got this working with Neo in 10 minutes :/ – Thabang Chukura Sep 6 '18 at 7:35
  • Ha. No worries. Have a look into the Accordions package I mentioned. Very clean and customisable. Also, I have installed the dev branch of Neo on a couple of Craft 3 sites and it seems to work great. If you can trust it that is. Good luck! – Jay Sep 6 '18 at 9:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.