The <details> element creates a disclosure widget in which information is only visible when the widget is toggled into an 'open' state. A <summary> element provides a summary, caption, or legend for the <details> element's disclosure box.
Use the <details> and <summary> elements to create native accordions or 'show/hide' widgets without any JavaScript. This is perfect for FAQs, collapsible sections of content, or any time you want to hide content until the user explicitly chooses to see it.
This is another great win for accessibility, as it's a standard HTML element that screen readers and other assistive technologies understand.
Here are some more details about this topic. You can put any content in here, like text, images, or even other elements.
<details class="bg-brand-secondary p-4 rounded-lg">
<summary class="font-bold cursor-pointer hover:text-brand-highlight">Click to see more</summary>
<p class="mt-4">Here are some more details about this topic. You can put any content in here, like text, images, or even other elements.</p>
</details>