890ee95d28
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
24 lines
841 B
JavaScript
24 lines
841 B
JavaScript
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");
|
|
}
|