maybe?

js/blog.js

@@ -148,73 +148,58 @@ function renderBlogEntries(entries) {
       : entry.dateLabel || 'Date not provided';
 
 
-    const createBody = () => {
-      const body = document.createElement('div');
-      body.className = 'blog-body';
+    const body = document.createElement('div');
+    body.className = 'blog-body';
 
-      const paragraphs = createParagraphs(entry.body);
+    const paragraphs = createParagraphs(entry.body);
 
-      if (!paragraphs.length) {
-        const empty = document.createElement('p');
-        empty.textContent = 'No content yet.';
-        body.appendChild(empty);
-      } else {
-        paragraphs.forEach((p) => body.appendChild(p));
-      }
-
-      return body;
-    };
+    if (!paragraphs.length) {
+      const empty = document.createElement('p');
+      empty.textContent = 'No content yet.';
+      body.appendChild(empty);
+    } else {
+      paragraphs.forEach((p) => body.appendChild(p));
+    }
 
 
-    let bodyContainer;
+    let content = body;
 
+    // Collapse long posts
     if (entry.body.length > BLOG_COLLAPSE_THRESHOLD) {
-      const details = document.createElement('details');
-      details.className = 'blog-collapse';
+      const wrapper = document.createElement('div');
+      wrapper.className = 'blog-collapse';
 
-      const summary = document.createElement('summary');
-
-      // Create preview
-      const preview = document.createElement('div');
+      const preview = document.createElement('p');
       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');
-      moreText.className = 'read-more-text';
-      moreText.textContent = 'Read more';
+      button.addEventListener('click', () => {
+        const expanded = body.style.display !== 'none';
 
-      summary.appendChild(moreText);
-
-
-      details.appendChild(summary);
-      details.appendChild(createBody());
-
-
-      details.addEventListener('toggle', () => {
-        moreText.textContent = details.open
-          ? 'Show less'
-          : 'Read more';
-
-        preview.style.display = details.open
-          ? 'none'
-          : 'block';
+        body.style.display = expanded ? 'none' : 'block';
+        preview.style.display = expanded ? 'block' : 'none';
+        button.textContent = expanded ? 'Read more' : 'Show less';
       });
 
 
-      bodyContainer = details;
+      wrapper.appendChild(preview);
+      wrapper.appendChild(button);
+      wrapper.appendChild(body);
 
-    } else {
-      bodyContainer = createBody();
+      content = wrapper;
     }
 
 
@@ -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);
   });