Goal: if there are no future events, I'm trying to hide or not display the entire events section. I'm not sure how to do this in the best way.

Right now, each event is shown in a div box. If there are no future events then none of the event boxes show, however the h2 title "Upcoming Events" does show. Most importantly is to find a way to not show the title also. Ideas?

<section id="events">
<div class="cleafix">
    <div class="max-width-4 mx-auto px3">
    <div class="col col-12"><hr class="md-mb4"><h2 class="bold caps inline-block">Upcoming Events</h2>
    {{ collection:event }}
        {{ if end_date | is_future }}
        <div class="col col-12 level2 my3 p3">
            <div class="col sm-col-7 md-col-9">
            <p class="pt1 mt0">{{ dates }} // {{ location }}</p>
            {{ if event_link }}<a href="{{ event_link }}" target="_blank"><h3 class="m0 p0">{{ title }}</h3></a>
            {{ else }}
            <h3 class="m0 p0">{{ title }}</h3>
            {{ /if }}

        <p class="mb0">{{ details }}</p>
        <p class="mt0 pt0">{{ role | upper }}: {{ relate:presented_by }}<a href="{{ url }}" style="text-decoration:none;">{{ title }}</a>
            {{ if count < total_results }} &amp;&nbsp;{{ /if }} {{ /relate:presented_by }} </p>
            {{ if register_url }}<a href="{{ register_url }}" target="_blank" class="btn btn-primary-orange">{{ button_text }}</a>{{ /if }}

        <div class="col sm-col-5 md-col-3 hide-mobile">
            {{ if event_link }}
            <a href="{{ event_link }}" target="_blank">{{ assets:image }}<img src="{{ url }}" alt="{{ alt }}"/>
            {{ /assets:image }}</a>
            {{ else }}
            {{ assets:image }}<img src="{{ url }}" alt="{{ alt }}"/>
            {{ /assets:image }}
            {{ /if }}
    </div>{{ /if }} {{ /collection:event }}

    <div class="col col-12 md-col-10 mb4"></div>

To see a visual of what I'm talking about look here (screen capture): https://snag.gy/YM4E2V.jpg


Answered by Jack McDade! Go to answer.