Read More / Read Less Button

For years, I struggled with a clean way to show additional content via a 'Read More' button. I know there are stacks out there that accomplish this, but I try to use as few stacks outside of F6 as possible when building sites. I like to figure out how to accomplish the same thing using swatches. Just my preference 🤷🏻‍♂️

I figured out a way using 2 Display swatches (to hide and show the content) and a tiny bit of javascript (to toggle the text of the button from 'Read More' and 'Read Less' when clicked). But the content popped open without a smooth transition to show and hide content.

Well today I was messing around with Peek-A-Boo (I know, going against my preference of 'outside' stacks), and realized I could edit my javascript to change the text of button when Peek-A-Boo is triggered.

So here's what I do:

1. Place the Peek-A-Boo and the PAB Launcher stacks in a parent container (could be a Container or 1 Column stack, etc.). Add the class 'showmore' to the Custom Classes box of parent.

2. Set up the Peek-A-Boo Trigger for Click Launcher.

3. Add a Button stack to the PAB Launcher with 'Read More' label.

4. Add a JavaScript stack after the PAB Launcher with this code:

document.querySelectorAll(".showmore").forEach(function (div) {
  div.querySelector("button").addEventListener("click", function () {
    div.classList.toggle("open");
    this.textContent = div.classList.contains("open") ? "READ LESS" : "READ MORE";
  });
});

In the javascript, you can change the text case to however you want (e.g. "Read More", "read more", etc.). You'll just want the Button label to match.

I like the functionality of Peek-A-Boo, and now with the button text changing, it makes my content that much cleaner.