Accordion (html)

 

Basic Accordion code for html.

Code:

<details> <summary>This is the title of the details tag</summary> <p>Here's a paragraph inside a details element</p> Here's some text after the paragraph </details>

 

Example:

 

 

source: How to create an accordion menu in HTML without jQuery

 

Accordion with borders

 

<div><details style="border: 1px solid black; padding: 10px;" open=""><summary style="padding-left: 17px;">Open for more details</summary><hr /> <div style="padding-left: 17px;"> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p> </div> </details></div> <p></p>