Let's create a small expandable section without JavaScript.
- <details> creates a disclosure widget that can be opened and closed by the user. - <summary> provides the visible label the user clicks. - Put the content that should appear when the widget is open inside <details> after <summary>. - The browser supplies the basic open/closed interaction. - Add the open attribute when you want the section to start open. - Keep the summary text short and clear so users know what will appear. - This pattern is useful for FAQs, extra notes, or optional details. - The important relationship is that <summary> belongs at the start of its parent <details>.
Notice how the HTML itself describes both the control and the hidden content. You get a useful interaction without writing a custom JavaScript accordion.