[Resolved] Hide text behind a foldout

[Bo]

I have a page (https://mxnord.dk/product-category/reservedele/daek-og-faelge/daek/) with a lot of text that I would like to hide behind a foldout of sorts, like described in this topic:
https://generatepress.com/forums/topic/suggestions-for-drop-down-collapsible-text/
Using the details element:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

But I am note sure how I can wrap it in the details element as described. If I put the editor in code mode and add the details html element around the whole text, it “un-wraps” it when I save the element so that instead of having the </details> at the end, it is right after the start.
The whole text is wrapped in a container, so I thought that I might change the container element to be “details”, but thats not in the options list.

I would rather not add any plugins to the mix as I try to keep the site as fast an lightweight as possible. So any ideas on how I can solve this?

[Ying]

Try this structure:
https://www.screencast.com/t/DKZJrw08YX

[Bo]

I had not thought of the html element 🙂 Worked like a charm, thank you!

[Ying]

You are welcome 🙂

[Author]

Posts