Content Accordion
Click Here to Open and Close this Accordion
This accordion defaults to closed...
Click Here to Close and Open this Accordion
To make an accordion default to open, add open after details, like this...
<details open>ANY CONTENT THAT YOU WANT TO HIDE INSIDE AN ACCORDION, put it in between these 2 blocks of HTML:
HTML block 1:
<details>
<summary>Click Here to Close and Open this Accordion</summary>
<p>This accordion defaults to closed</P>[Add your content and blocks 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>