oacpl/newsletters/templates/newsletters.html

{% 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">
                        <h2>{{ newsletter.subject }}</h2>
                        <span class="text-muted">By: {{ newsletter.creator }}</span>
                        <span class="text-muted float-right">{{ newsletter.publish }}</span>
                    </div>
                    <div class="bg-light-blue p-3 newsletter-body" style="display:none;">
                        <span>{{ newsletter.body }}</span>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <script>
        $('.newsletter').click(function() {
            var content = $('.newsletter-body', this);
            if(content.css('display') == 'block') {
                content.slideUp()
            } else {
                content.slideDown()
            }

        })
    </script>
{% endblock %}