Add collapsible posts feature

Implemented functionality to collapse and expand posts in the
main blog view. Users can now toggle the visibility of a post's
body by clicking on the post header. Additionally, clicking on
the "Posts" header at the top of the page will toggle the
visibility of all posts simultaneously. This enhancement improves
the user experience by allowing users to manage the display of
content more efficiently.

Fixes #FLAS-32

flaskr/templates/blog/index.html

@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block header %}
-  <h1>{% block title %}Posts{% endblock %}</h1>
+  <h1 id="toggle-all">Posts</h1>
   {% if g.user %}
     <a class="action" href="{{ url_for('blog.create') }}">New</a>
   {% endif %}
@@ -10,7 +10,7 @@
 {% block content %}
   {% for post in posts %}
     <article class="post">
-      <header>
+      <header class="post-header" onclick="togglePostBody({{ post['id'] }})">
         <div>
           <h1>{{ post['title'] }}</h1>
           <div class="about">by {{ post['username'] }} on {{ post['created'].strftime('%Y-%m-%d') }}</div>
@@ -19,10 +19,11 @@
           <a class="action" href="{{ url_for('blog.update', id=post['id']) }}">Edit</a>
         {% endif %}
       </header>
-      <p class="body">{{ post['body'] }}</p>
+      <p class="body" id="post-body-{{ post['id'] }}">{{ post['body'] }}</p>
     </article>
     {% if not loop.last %}
       <hr>
     {% endif %}
   {% endfor %}
+  <script src="{{ url_for('static', filename='collapse.js') }}"></script>
 {% endblock %}