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

{% if events %}
<div class="bg-secondary">
  <div class="container container-responsive pb-2 pt-2">
    <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="event-responsive 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 font-weight-bold text-color-special date-responsive ">
    		    {{ 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="event-responsive 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>
  </div>
</div>
{% endif %}