Join the Webstudio community

Updated 3 weeks ago

How to setup toggle for expandable text content

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?
1
B
t
J
7 comments
Maybe something like Collapsible component?
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
@thelamplighter_ You might need to write some JS. Are you comfortable with it? If not, you could you share your site.
Yeah I am, pls direct me on the code to write
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>
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>
Plain Text
<input type="checkbox">
<p>hide me</p>

Plain Text
body:has([type=checkbox]:checked) p {
  display: none;
}
Add a reply
Sign up and join the conversation on Discord
","upvoteCount":0,"dateCreated":"2025-03-03T21:29:59.489Z","datePublished":"2025-03-03T21:29:59.489Z","dateModified":"2025-03-03T21:34:02.349Z","url":"https://help.webstudio.is/how-to-setup-toggle-for-expandable-text-content-ZtMf8KY72L6t#fc07250f-4dd7-4cf1-bedc-cdde07bdf125","author":{"@type":"Person","url":"https://help.webstudio.is/members/6c66325d-fff8-43a2-b97e-549275813461","name":"Jeremy","identifier":"6c66325d-fff8-43a2-b97e-549275813461","image":"https://cdn.discordapp.com/avatars/383871071566430208/6de448190b31c7a9af49e5fbd4f5d047.webp?size=256"}},{"@type":"Answer","text":"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:","upvoteCount":0,"dateCreated":"2025-03-03T21:37:39.257Z","datePublished":"2025-03-03T21:37:39.257Z","dateModified":"2025-03-03T21:37:39.257Z","url":"https://help.webstudio.is/how-to-setup-toggle-for-expandable-text-content-ZtMf8KY72L6t#a0e6fa8b-98f9-48cb-b570-1b04d01b4956","author":{"@type":"Person","url":"https://help.webstudio.is/members/6c66325d-fff8-43a2-b97e-549275813461","name":"Jeremy","identifier":"6c66325d-fff8-43a2-b97e-549275813461","image":"https://cdn.discordapp.com/avatars/383871071566430208/6de448190b31c7a9af49e5fbd4f5d047.webp?size=256"}},{"@type":"Answer","text":"\n

hide me

body:has([type=checkbox]:checked) p { display: none;\n}","upvoteCount":0,"dateCreated":"2025-03-03T23:24:43.500Z","datePublished":"2025-03-03T23:24:43.500Z","dateModified":"2025-03-03T23:34:58.712Z","url":"https://help.webstudio.is/how-to-setup-toggle-for-expandable-text-content-ZtMf8KY72L6t#ce569661-4c3d-4ba8-a16c-12a97cbbe38f","author":{"@type":"Person","url":"https://help.webstudio.is/members/4d4b0b8f-c63c-4294-8173-819b8e1f1e66","name":"Vladimir Drayling","identifier":"4d4b0b8f-c63c-4294-8173-819b8e1f1e66","image":"https://cdn.discordapp.com/avatars/473539443072958465/210293b79467153e504405cd619c40b6.webp?size=256"}}]}}