0
196
ViewsWhat is the name for this element?
When you click on "+" below of the element open new texts and the other elements are push down. It's a simple question I know but still valid: how this element is called? I really can't find any name for this
·
Juan Pablo Isaza
1 answers
Answer question0
They're most likely using JavaScript, but this is achieved using raw HTML with details & summary elements. Here is a short implementation:
/* removes the default marker */
details summary::-webkit-details-marker,
details summary::marker {
display: none;
content: "";
}
details {
display: block;
border: 3px solid black;
margin-bottom: 2rem;
}
summary {
padding: 1rem;
cursor: pointer;
}
details[open] summary {
border-bottom: 3px solid black;
}<details>
<summary>Some text blablabla +</summary>
<ol>
<li>asdf 1</li>
<li>asdf 2</li>
<li>asdf 3</li>
</ol>
</details>
<details>
<summary>Some text blablabla +</summary>
<ol>
<li>asdf 1</li>
<li>asdf 2</li>
<li>asdf 3</li>
</ol>
</details>
<details>
<summary>Some text blablabla +</summary>
<ol>
<li>asdf 1</li>
<li>asdf 2</li>
<li>asdf 3</li>
</ol>
</details>
·
Juan Pablo Isaza
Report
Answer question