How You Can Put a "Read more" Button to Collapse Blog Content Like the Pros

How to Add Inverted “Read more / Read less” with Arrows in Blogger

This tutorial shows you how to create expandable sections inside your Blogger posts with a “Read more” pill that inverts its colors, switches to “Read less” when open, and rotates its arrow ▶ → ▼. A second “Read less ▲” button is also placed at the end of the expanded section.

---

Live Demo

Section A

This is the teaser for Section A. It remains visible.

Read more ▶

This is the hidden content for Section A. It becomes visible when expanded. You can put multiple paragraphs, images, or lists here.

Section B

This is the teaser for Section B. Readers can decide to open it.

Read more ▶

Expanded content for Section B. Each block works independently.

---

Step 1: Add the CSS + JS once in your Theme

Go to Theme → Edit HTML in Blogger and paste this just before </head>.

<style>
/* Read-More styles */
.rm-section{
  border:1px solid rgba(221,221,221,.6);
  border-radius:8px;
  padding:.75rem 1rem;
  margin:1rem 0;
}
.rm-section details{ margin:0; }
.rm-section summary{
  cursor:pointer; font-weight:600;
  display:inline-flex; align-items:center; gap:.4em;
  list-style:none;
}
.rm-section summary::-webkit-details-marker{ display:none; }

/* Right arrow ▶ rotates down ▼ on open */
.rm-arrow{
  display:inline-block;
  transition:transform .2s ease;
  transform:rotate(0deg);
}
.rm-section details[open] .rm-arrow{ transform:rotate(90deg); }

/* Inverted pill */
.rm-pill{
  display:inline-block;
  padding:.15em .45em;
  border-radius:.35em;
  font-weight:700;
  border:1px solid transparent;
}

/* Footer Read less */
.rm-footer{ margin-top:.75rem; text-align:left; }
.rm-footer .rm-less-btn{
  display:inline-flex; align-items:center; gap:.4em;
  cursor:pointer;
  padding:.15em .45em;
  border-radius:.35em;
  font-weight:700;
  border:1px solid transparent;
}

/* Optional: keep the bottom Read-less visible as you scroll long content */
.rm-footer { 
  position: sticky; 
  bottom: 0; 
  padding-top: .5rem; 
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.06));
}

</style>

<script type="text/javascript">
//<![CDATA[
(function onReady(fn){document.readyState==='loading'?document.addEventListener('DOMContentLoaded',fn):fn();})(function(){
  function getEffectiveBG(node){
    while(node && node!==document.documentElement){
      const bg=getComputedStyle(node).backgroundColor;
      if(bg && bg!=='rgba(0, 0, 0, 0)' && bg!=='transparent') return bg;
      node=node.parentElement;
    }
    return getComputedStyle(document.documentElement).backgroundColor||'#000';
  }
  function invertPill(el, ref){
    const bg=getEffectiveBG(ref);
    const fg=getComputedStyle(ref).color || getComputedStyle(document.body).color || '#fff';
    el.style.backgroundColor=fg;
    el.style.color=bg;
    el.style.borderColor=fg;
  }
  document.querySelectorAll('.rm-section details').forEach(details=>{
    const section=details.closest('.rm-section')||details;
    const summary=details.querySelector('summary');
    const topPill=summary.querySelector('.rm-pill');
    invertPill(topPill, section);
    // Add bottom "Read less"
    if(!details.querySelector('.rm-footer')){
      const footer=document.createElement('div');
      footer.className='rm-footer';
      footer.innerHTML=`<button type="button" class="rm-less-btn">
        <span>Read less</span> <span aria-hidden="true">▲</span>
      </button>`;
      details.appendChild(footer);
      invertPill(footer.querySelector('.rm-less-btn'), section);
      footer.querySelector('.rm-less-btn').addEventListener('click',()=>{
        details.open=false;
        summary.focus({preventScroll:true});
        summary.scrollIntoView({block:'nearest',behavior:'smooth'});
      });
    }
    function updateLabels(){
      topPill.textContent=details.open?'Read less':'Read more';
      invertPill(topPill, section);
      const footerBtn=details.querySelector('.rm-less-btn');
      if(footerBtn) invertPill(footerBtn, section);
    }
    details.addEventListener('toggle', updateLabels);
    updateLabels();
  });
});
//]]>
</script>

---

Step 2: Use This Markup in Your Posts

Switch to HTML view in the post editor and add this where you want a Read-More block:

<div class="rm-section">
  <p>Teaser goes here.</p>
  <details>
    <summary>
      <span class="rm-pill">Read more</span>
      <span class="rm-arrow" aria-hidden="true">▶</span>
    </summary>
    <p>Expanded content goes here.</p>
  </details>
</div>

You can repeat this block multiple times in a single post. Each will work independently.

---

Step 3: That’s it!

Now your Blogger posts can have professional “Read more / Read less” sections with inverted labels and rotating arrows. Copy the code above into your theme once, and reuse the snippet in any post.

---