Showing and hiding content without JavaScript? It is possible using pure HTML <details></details> element.
<details class="details-sample">
<summary>Show me more</summary>
Lorem ipsum...
</details>
We have <summary></summary> element as our presenting label. We need to add our text inside of it . Everything that is not in the summary element but is in the details element will be treated as our content and it will be showed or hidden depending on the current click.
We can also control the open state of the details element using CSS.
/* apply styles only when element is opened */
.details-sample {
padding: .5em;
cursor: pointer;
max-width: fit-content;
}
/* apply styles only when element is opened */
.details-sample[open] summary {
border-bottom: 1px solid #000;
}
Do you want to change this arrow inside of the details element? We can do this using simple CSS property. You can use an emoji, some HTML entity or even a custom image.
.details-sample > summary {
list-style-type: '➡️ ';
}
.details-sample[open] > summary {
list-style-type: '⬇️ ';
}
Summary
Details element is a great option to choose if you want to show and hide some simple content on click without using any scripts.