Problem with matrix if statement for hero image other content ends up in my div Been playing with a hero matrix field and can't seem to get this working correctly when all block types are not used.

I have four possible block types for this hero matrix field. Image, Heading, Sub Heading, and CTA. If I use each block type it will display fine, if I don't use all of the block types the rest of the page content ends up in my container for the headings and cta of the hero image. 

Example I create a hero but don't add a cta button so I only used 3 of the 4 types.

Pretty sure this has something to do with my if statement.

Here is my code.

{% for block in entry.hero %}&lt;!-- For each hero matrix field --&gt;
    {% if block.type == "image" %}
        {% set image = block.heroimage.first() %}
        &lt;div class="hero" style="background: url('{{ image.url }}') no-repeat scroll 50% 50% / 100% auto rgba(0, 0, 0, 0);"&gt;
            &lt;div class="container" style="color:white;"&gt;
                {% elseif block.type == "heading" %}
                    &lt;h1&gt;{{ block.heading }}&lt;/h1&gt;
                {% elseif block.type == "subHeading" %}
                    &lt;h2&gt;{{ block.heading }}&lt;/h2&gt;
                {% elseif block.type == "cta" %}
                    {% set ctaURL = block.ctaURL.first() %}
                    {% set ctaText = block.ctaText %}
                    {% if ctaURL %}
                        &lt;a href="{{ ctaURL.url }}" class="button"&gt;{{ ctaText }}&lt;/a&gt;   
                    {% endif %}
            &lt;/div&gt;
        &lt;/div&gt;
    {% endif %}  
{% endfor %}


Here is a screenshot of my matrix config.
The problem is that the if statements are not nested properly. If your matrix does not contain the cta block for example then the 2 closing div tags will never be output, which obviously destroys the layout.

The bigger question for me is why you would want to separate the fields into different blockTypes at all. An easier approach would be to create one blockType (called 'imageHero' for example) with all 5 fields in it ('image', 'heading', 'subHeading', 'ctaEntry', 'ctaText'), which you could access directly. In this way, the blockTypes could be used for different 'types' of hero, rather than for separating out a single hero's fields.

{% for block in entry.hero %}

    {% if blocktype == 'imageHero'%}

        {% set image = block.heroimage.first() %}
        {% if image %}
            &lt;div class="hero" style="background: url('{{ image.url }}') no-repeat scroll 50% 50% / 100% auto rgba(0, 0, 0, 0);"&gt;
                &lt;div class="container" style="color:white;"&gt;
                    {% if block.heading %}
                        &lt;h1&gt;{{ block.heading }}&lt;/h1&gt;
                    {% endif %}
                    {% if block.subHeading %}
                        &lt;h2&gt;{{ block.heading }}&lt;/h2&gt;
                    {% endif %}
                    {% if block.ctaEntry and block.ctaText %}
                        &lt;a href="{{ block.ctaEntry.first.url }}" class="button"&gt;{{ block.ctaText }}&lt;/a&gt;
                    {% endif %}
                &lt;/div&gt;
            &lt;/div&gt;
        {% endif %}

    {% endif %}

{% endfor %}