details tag is used to create a block that specifies additional details that the user can expand or collapse. For example, by default, a collapsed/closed details block can be displayed in the following way:
<details> <p> Details in here will be hidden till the user expands/opens the details block. </p> </details>
details block is shown onscreen with a small triangle which rotates to indicate open/closed status, with a label next to it. When the user interacts with this block, it will expand/collapse and show/hide the details depending on its state. You may specify the
open attribute to the
details tag, to make the details appear expanded by default, for example, like so:
<details open> <p> Details in here are shown by default, till the user interacts with the details block and collapses/closes it. </p> </details>
details tag is often used together with a
summary element, which can be provided to show a label or summary when the
details block is collapsed/closed. This can be useful, for example, to create order summaries, features list, etc., that the user can show/hide on demand when/if they require it. For example:
<details> <summary>Grand Total: $500.00</summary> <ul> <li>Shipping: $5.00</li> <li>Order Total: $485.00</li> <li>Tax: $10.00</li> </ul> </details>
summary tag is not present, depending on the browser you're using, a default label might be shown when the details block is closed/collapsed.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.