Make Anything Collapsible

Use simple HTML tags to make any content on your Ghost site expand and collapse - accordion style!

Fun and Easy! Click this accordion to reveal the hidden contents...

Surprise! You can include in your accordions any and all content that you want to be initially hidden (so for example it doesn't clutter up the page, or you want to provide a concise summary of the sections on a page and quick access to the sections.)

Below is a screenshot of the 3 blocks I put into the editor of this page to create the accordion above ...

[You can certainly use just one HTML card for the whole accordion and its contents, as in the first image above. But using separate HTML cards for the opening and closing details tags allows any arbitrary additional content to be more easily inserted and re-arranged.]

Then, to pretty up all of the accordions on my site, I put some CSS into the site header code injection ...

HERE are some more ways to make simple content accordions using Ghost's HTML Card:

https://www.w3schools.com/tags/tag_details.asp

AND SOME JAVASCRIPT-ENABLED OPTIONS:

https://www.w3schools.com/w3css/w3css_accordions.asp

https://www.w3schools.com/howto/howto_js_accordion.asp