Disclosure Boxes: <details> and <summary>
You can create a disclosure widget, allowing some content to be hidden by
closing the widget, by using the <details> tag.
The “pointer” cursor style is used when you hover over one:
This is the summary
And here are the details:
- Cash on hand: $500.00
- Current invoice: $75.30
- Due date: 5/6/19
Adding the open attribute to the <details> tag makes it be open by default:
This is the summary
And here are the details:
- Cash on hand: $500.00
- Current invoice: $75.30
- Due date: 5/6/19
A <details> with no <summary> just gets the word “Details” as its summary:
And here are the details:
- Cash on hand: $500.00
- Current invoice: $75.30
- Due date: 5/6/19