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>

Soporte Aulasneo

Accordion (html)

Basic Accordion code for html.

Accordion with borders

Related content