maybe?

js/blog.js

@@ -148,7 +148,6 @@ function renderBlogEntries(entries) {
       : entry.dateLabel || 'Date not provided';
 
 
-    const createBody = () => {
     const body = document.createElement('div');
     body.className = 'blog-body';
 
@@ -162,59 +161,45 @@ function renderBlogEntries(entries) {
       paragraphs.forEach((p) => body.appendChild(p));
     }
 
-      return body;
-    };
 
+    let content = body;
 
-    let bodyContainer;
+    // Collapse long posts
-
     if (entry.body.length > BLOG_COLLAPSE_THRESHOLD) {
-      const details = document.createElement('details');
+      const wrapper = document.createElement('div');
-      details.className = 'blog-collapse';
+      wrapper.className = 'blog-collapse';
 
-      const summary = document.createElement('summary');
+      const preview = document.createElement('p');
-
-      // Create preview
-      const preview = document.createElement('div');
       preview.className = 'blog-preview';
 
-      const previewText = entry.body
+      preview.textContent = entry.body
         .split('\n')
         .filter(line => line.trim())
         .slice(0, BLOG_PREVIEW_LINES)
         .join('\n');
 
-      preview.textContent = previewText;
+
+      const button = document.createElement('button');
+      button.className = 'blog-expand-button';
+      button.textContent = 'Read more';
 
 
-      summary.appendChild(preview);
+      body.style.display = 'none';
 
-      const moreText = document.createElement('span');
+      button.addEventListener('click', () => {
-      moreText.className = 'read-more-text';
+        const expanded = body.style.display !== 'none';
-      moreText.textContent = 'Read more';
 
-      summary.appendChild(moreText);
+        body.style.display = expanded ? 'none' : 'block';
-
+        preview.style.display = expanded ? 'block' : 'none';
-
+        button.textContent = expanded ? 'Read more' : 'Show less';
-      details.appendChild(summary);
-      details.appendChild(createBody());
-
-
-      details.addEventListener('toggle', () => {
-        moreText.textContent = details.open
-          ? 'Show less'
-          : 'Read more';
-
-        preview.style.display = details.open
-          ? 'none'
-          : 'block';
       });
 
 
-      bodyContainer = details;
+      wrapper.appendChild(preview);
+      wrapper.appendChild(button);
+      wrapper.appendChild(body);
 
-    } else {
+      content = wrapper;
-      bodyContainer = createBody();
     }
 
 
@@ -228,8 +213,8 @@ function renderBlogEntries(entries) {
 
       entry.attachments.forEach((attachment) => {
         const item = document.createElement('li');
-
         const link = document.createElement('a');
+
         link.href = ATTACHMENT_DIR + encodeURI(attachment);
         link.target = '_blank';
         link.rel = 'noopener noreferrer';
@@ -246,7 +231,7 @@ function renderBlogEntries(entries) {
 
     article.appendChild(title);
     article.appendChild(meta);
-    article.appendChild(bodyContainer);
+    article.appendChild(content);
 
     container.appendChild(article);
   });