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/static/collapse.js

@@ -0,0 +1,24 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const toggleAllButton = document.getElementById("toggle-all");
+    const postHeaders = document.querySelectorAll(".post-header");
+    const posts = document.querySelectorAll(".post");
+
+    toggleAllButton.addEventListener("click", function() {
+        posts.forEach(post => {
+            post.classList.toggle("collapsed");
+        });
+    });
+
+    postHeaders.forEach(header => {
+        header.addEventListener("click", function(event) {
+            const postId = event.currentTarget.getAttribute("onclick").match(/\d+/)[0];
+            togglePostBody(postId);
+        });
+    });
+});
+
+function togglePostBody(postId) {
+    const postBody = document.getElementById(`post-body-${postId}`);
+    const post = postBody.closest(".post");
+    post.classList.toggle("collapsed");
+}