How to setup toggle for expandable text content

At a glance

The community member is working on a website and wants to create an "about" section with a "read more" button that expands the text to show the full content. The comments suggest using a collapsible component, but the community member had trouble dynamically updating the button text to say "read less" when the text is fully shown. Some community members provided code examples using JavaScript and CSS to achieve the desired functionality, including a link to a CSS-only solution and a checkbox-based approach. There is no explicitly marked answer.

Useful resources

tthelamplighter_

Pls I'm working on a site, I want to have an about section that shows a bit of text with a read more button that expands the text to show the whole content. How do I go about this?

7 comments

BBogdan

Maybe something like Collapsible component?

tthelamplighter_

Yeah I tried that and kind of maneuvered it to work but I couldn't edit the button content text dynamically. I wanted the button to read "read more" when the text is collapsed and "read less" or "close" when the text is fully showing

JJeremy

@thelamplighter_ You might need to write some JS. Are you comfortable with it? If not, you could you share your site.

tthelamplighter_

Yeah I am, pls direct me on the code to write

JJeremy

This what you want https://css-test-components.wstd.io/?

I added this:
<script type="module">
document.querySelectorAll(".w-collapsible").forEach((collapsible) => {
const button = collapsible.querySelector("button");

if (!button) return;

const updateButtonText = () => {
const isOpen = collapsible.getAttribute("data-state") === "open";
button.textContent = isOpen ? "Read less" : "Read more";
button.setAttribute("aria-expanded", isOpen.toString());
};

// Attach event listener to the button
button.addEventListener("click", () => {
setTimeout(updateButtonText, 10); // Small delay to allow attribute change
});
});
</script>

JJeremy

Just thinking about it, you could probably do this with CSS only. I haven't verified it, but it seems plausible.

Add 2 different buttons, "read more" and "read less" with IDs attached to each. Then add CSS to display each based on the data-state:

eg:
<button id="open">Read less</button>
<button id="close">Read more</button>

<style>
w.collapsible[data-state="open"] #open { display: none; }
w.collapsible[data-state="open"] #close { display: none; }
</style>

VVladimir Drayling

Plain Text

<input type="checkbox">
<p>hide me</p>

Plain Text

body:has([type=checkbox]:checked) p {
  display: none;
}

Add a reply

Join the Webstudio community

How to setup toggle for expandable text content