<p>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.</p>

<p>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 <a href="https://github.com/Alhadis/Accordion" rel="nofollow noreferrer">this accordion</a> package for how simple it is. It's an oldie, but a goodie and is still being maintained.)</p>

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

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

         &lt;div class="container"&gt;
             &lt;div class="row"&gt;
                 &lt;div class="col-md-12"&gt;
                     &lt;div class="accordion" id="accordion"&gt;

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

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

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

                        {% endfor %}

                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    {% endswitch %}
{% endfor %}
</code></pre>

CC BY-SA 4.0
2018-09-06T07:35:10.153Z
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
CC BY-SA 4.0
2018-09-06T09:55:33.960Z
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
CC BY-SA 4.0
2018-09-05T14:35:18.907Z
2018-09-05T14:35:18.907Z
Jay
<p>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.</p>

<p>My code so far:</p>

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

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

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

<p>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 <code>contentBuilder</code> is a row (field) called <code>components</code>, of which <code>accordion</code> 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.</p>

<p>Anyone have any ideas how to go about this?</p>

CC BY-SA 4.0
2018-08-30T15:03:47.747Z
I've got screenshots of my SuperTable setup I can add above, if that will help give further clarity
Thabang Chukura
<craft3><matrix><plugin-supertable><bootstrap-craft>
Bootstrap 4 Accordion with Matrix (and SuperTable)
# Bootstrap 4 Accordion with Matrix (and SuperTable)

(Asked by: username_0 on 2018-08-30)

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' %}
                 
                    
                        
                            
                                
                                    
                                        
                                            
                                                {{ block.accordionTitle }}
                                            
                                        
                                    

                                    
                                        
                                            {{ block.accordionCopy }}
                                        
                                    
                                
                            
                        
                    
                
        {% 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?

**Tags:** craft3, matrix, plugin-supertable, bootstrap-craft
> **Comments:**
> **username_0**: I've got screenshots of my SuperTable setup I can add above, if that will help give further clarity  

---

## 1 answers

### Answer by username_1 on 2018-09-05. Score: 2 | Accepted answer

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

         
             
                 
                     

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

                             
                                 
                                     
                                         
                                              {{ block.accordionTitle }}
                                          
                                     
                                 

                                 
                                     
                                         {{ block.accordionCopy }}
                                     
                                 
                             

                        {% endfor %}

                    
                
            
        
    {% endswitch %}
{% endfor %}

> **Comments:**
> **username_0**: 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 :/  
> **username_1**: 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!  

---

