Collapsible Content Accordion
Demo:
Click Here to Open and Close this Accordion
This accordion defaults to closed...
Click Here to Close and Open this Accordion
*This accordion defaults to open...
HOW-TO:
Any content in your post or page that you want to hide inside a collapsible accordion, put it in between these 2 blocks of HTML in the editor:
HTML Block 1…
<details>
<summary>Click Here to Open and Close this Accordion</summary>
* To make the accordion open by default, add open to the above <details> tag like so…
<details open>
[Add your post or page content and any blocks in the editor, as usual, sandwiched right here, in between]
HTML Block 2…
</details>
<style> /* some optional pretty styling */
details {
width: 100%;
background-color: #eee;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 5px #35353536;
}
summary {
background: rgb(59,89,152,.5);
color: #fff;
padding: 0 0 0 15px;
margin: -5px;
cursor: pointer;
border: .5px solid gray;
border-radius: 5px;
outline: none;
}
summary:focus, summary:hover {
background-color: rgb(0,172,237,.5);
}
</style>
Result:
Your accordion should look like this:Example:
Here is an example where I’m displaying my Table of Contents in an Accordion:
https://ghost-o-matic.com/collapsible-toc/
Note:
You can put an unlimited number of accordions on any post/page.
You can also put simple Accordions like this anywhere else that displays HTML, since it is a standard, built-in HTML5 element…