flask-json-dream-website/templates/events.html

{% if events %}
<div class="col grid-margin-md stretch-card d-flex_" style="font-size: x-large;">
 <div class="card bg-transparent border-0">
  <div class="card-body">
    <div class="d-flex justify-content-between"></div>
    {% for event in events %}
      <div class="moreDates" {% if loop.index > 3 %} style="display: none;" {% endif %}>
        <div class="row">
            <div class="pt-1 border-bottom {% if loop.index == 1 %} border-top {% endif %} col">
              <div class="d-flex justify-content-center align-items-center">
                <h1 class="mr-5 text-primary font-weight-bold text-info">{{ event["day"] }}</h1>
                  <div>
                    <p class="font-weight-bold mb-0 text-dark">{{ event["month"] }}</p>
                    <p class="mb-2">{{ event["year"] }}</p>
                  </div>
              </div>
            </div>
            <div class="pt-1 border-bottom {% if loop.index == 1 %} border-top {% endif %} col pl-3">
              <p class="text-dark font-weight-bold mb-0">
                  {{ event["description"] }} 
                  {% if event.get("location") %} @{{ event["location"] }} {% endif %}
              </p>
              <p class="mb-0">{{ event["time"] }}</p>
            </div>
          </div>
    </div>
    {% endfor %}
    {% if moreEvents %}
    <button id="moreDatesButton" class="float-right mt-3 btn btn-light" onClick=showAdditionalDates()>Mehr..</button>
    {% endif %}
   </div>
 </div>
</div>
<!-- mehr Termine Button -->
<script>
  function showAdditionalDates(){
    Array.from(document.getElementsByClassName("moreDates")).forEach(element => {
      element.style.display = "";
    });
    document.getElementById("moreDatesButton").style.display = "none"
  }
</script>
{% endif %}