<p>You'll want to implement something <a href="https://craftcms.stackexchange.com/a/6739/5275">like this</a>:</p>

<pre><code>{% for block in entry.menuBuilder %}

  {% set type = block.type.handle %}
  {% set isFirstConsecutiveBlockOfType = (loop.first or type != block.getPrev().type.handle) %}
  {% set isLastConsecutiveBlockOfType = (loop.last or type != block.getNext().type.handle) %}

  {% switch block.type %}
  {% case 'menuItem' %}

    {% if isFirstConsecutiveBlockOfType %}
      &lt;ul&gt;
    {% endif %}

      &lt;li&gt;
        &lt;h2&gt;{{ block.dishName }}&lt;/h2&gt;
        &lt;p&gt;{{ block.dishDescription }}&lt;/p&gt;
        &lt;p&gt;{{ block.dishPrice }}&lt;/p&gt;
      &lt;/li&gt;

    {% if isLastConsecutiveBlockOfType %}
      &lt;/ul&gt;
    {% endif %}

  {% case 'subHeading' %}

    &lt;header&gt;
      &lt;h2&gt;{{ block.heading }}&lt;/h2&gt;
    &lt;/header&gt;

  {% endswitch %}
{% endfor %}
</code></pre>

<p>Basically, for each block we're checking if it is the first or last item in the loop, or if that block's type doesn't match the previous or next block's type. This will let us know if the block we're dealing with is the first or the last in a series of <code>menuItem</code> blocks. Then in the switch/case we can use our new variables to conditionally include any wrapping html.</p>

CC BY-SA 4.0
2019-05-21T11:52:20.513Z
Brilliant!  Works perfectly thank you!
Martin
CC BY-SA 4.0
2019-05-21T12:38:45.170Z
You're welcome, glad it worked! Cheers 
Jalen Davenport
CC BY-SA 4.0
2019-05-21T11:09:50.350Z
2019-05-21T11:09:50.350Z
Jalen Davenport
<p>I'm struggling to get my head around the syntax to output information in a correct HTML structure.  At the moment I have this:</p>

<pre><code>{% for block in entry.menuBuilder %}
{% switch block.type %}
{% case 'menuItem' %}

&lt;ul&gt;
  &lt;li&gt;
    &lt;h2&gt;{{ block.dishName }}&lt;/h2&gt;
    &lt;p&gt;{{ block.dishDescription }}&lt;/p&gt;
    &lt;p&gt;{{ block.dishPrice }}&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

{% case 'subHeading' %}

&lt;header&gt;
  &lt;h2&gt;{{ block.heading }}&lt;/h2&gt;
&lt;/header&gt;

{% endswitch %}
{% endfor %}
</code></pre>

<p>This code is working in that it's displaying the information for me but unfortunately it opens and closes the UL for every item so I end up with:</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;
    &lt;h2&gt;Name&lt;/h2&gt;
    &lt;p&gt;Description&lt;/p&gt;
    &lt;p&gt;Price&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;h2&gt;Name&lt;/h2&gt;
    &lt;p&gt;Description&lt;/p&gt;
    &lt;p&gt;Price&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;h2&gt;Name&lt;/h2&gt;
    &lt;p&gt;Description&lt;/p&gt;
    &lt;p&gt;Price&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt; ... etc
</code></pre>

<p>What I need to achieve the UL to open, loop through all instances of the Block using just the LI and then close:</p>

<pre><code> &lt;ul&gt;
  &lt;li&gt;
    &lt;h2&gt;Name&lt;/h2&gt;
    &lt;p&gt;Description&lt;/p&gt;
    &lt;p&gt;Price&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;h2&gt;Name&lt;/h2&gt;
    &lt;p&gt;Description&lt;/p&gt;
    &lt;p&gt;Price&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;h2&gt;Name&lt;/h2&gt;
    &lt;p&gt;Description&lt;/p&gt;
    &lt;p&gt;Price&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I've tried adding a for-loop around the LI but I just get errors or nothing at all.</p>

<p>Hopefully this will be simple to somebody!? :D</p>

<p>Many thanks
<a href="https://i.sstatic.net/YlQCp.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/YlQCp.png" alt="blocks"></a></p>

<matrix><loop><block-types><switch>
Loop through Matrix Block fields within a Switch Case and retain HTML structure
# Loop through Matrix Block fields within a Switch Case and retain HTML structure

(Asked by: username_0 on 2019-05-21)

I'm struggling to get my head around the syntax to output information in a correct HTML structure.  At the moment I have this:
{% for block in entry.menuBuilder %}
{% switch block.type %}
{% case 'menuItem' %}


  
    {{ block.dishName }}
    {{ block.dishDescription }}
    {{ block.dishPrice }}
  


{% case 'subHeading' %}


  {{ block.heading }}


{% endswitch %}
{% endfor %}

This code is working in that it's displaying the information for me but unfortunately it opens and closes the UL for every item so I end up with:

  
    Name
    Description
    Price
  



  
    Name
    Description
    Price
  



  
    Name
    Description
    Price
  
 ... etc

What I need to achieve the UL to open, loop through all instances of the Block using just the LI and then close:
 
  
    Name
    Description
    Price
  
  
    Name
    Description
    Price
  
  
    Name
    Description
    Price
  


I've tried adding a for-loop around the LI but I just get errors or nothing at all.
Hopefully this will be simple to somebody!? :D
Many thanks

**Tags:** matrix, loop, block-types, switch


---

## 1 answers

### Answer by username_1 on 2019-05-21. Score: 2 | Accepted answer

You'll want to implement something like this:
{% for block in entry.menuBuilder %}

  {% set type = block.type.handle %}
  {% set isFirstConsecutiveBlockOfType = (loop.first or type != block.getPrev().type.handle) %}
  {% set isLastConsecutiveBlockOfType = (loop.last or type != block.getNext().type.handle) %}

  {% switch block.type %}
  {% case 'menuItem' %}

    {% if isFirstConsecutiveBlockOfType %}
      
    {% endif %}

      
        {{ block.dishName }}
        {{ block.dishDescription }}
        {{ block.dishPrice }}
      

    {% if isLastConsecutiveBlockOfType %}
      
    {% endif %}

  {% case 'subHeading' %}

    
      {{ block.heading }}
    

  {% endswitch %}
{% endfor %}

Basically, for each block we're checking if it is the first or last item in the loop, or if that block's type doesn't match the previous or next block's type. This will let us know if the block we're dealing with is the first or the last in a series of menuItem blocks. Then in the switch/case we can use our new variables to conditionally include any wrapping html.

> **Comments:**
> **username_0**: Brilliant!  Works perfectly thank you!  
> **username_1**: You're welcome, glad it worked! Cheers   

---

