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?
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
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"}}]}}