How to setup toggle for expandable text content

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