{% extends 'base.html' %} {% block body %} <style> .newsletter-header { cursor: pointer; user-select: none; } .newsletter-header:hover { background-color: rgba(0, 0, 0, 0.1) } </style> <div class="container-fluid bg-dark-primary"> <div class="container py-3"> {% for newsletter in newsletters %} <div class="col-12 p-0 mb-3 bg-white newsletter"> <div class="p-3 newsletter-header" data-toggle="collapse" data-target="#newsletter-body-{{ newsletter.id }}" aria-expanded="false" aria-controls="newsletter-body-{{ newsletter.id }}"> <h2>{{ newsletter.subject }}</h2> <span class="text-muted">By: {{ newsletter.creator }}</span> <span class="text-muted float-right">{{ newsletter.publish }}</span> </div> <div id="newsletter-body-{{ newsletter.id }}" class="bg-light-blue collapse"> <div class="p-3"> {{ newsletter.body }} </div> </div> </div> {% endfor %} </div> </div> {% endblock %}