Code Playground
Learn More Pro
- Chrome browser auto-expands the collapsed panel when the searched term is found. On going to the next matched text, the expanded panel auto-collapses. Safari and Firefox don't implement this feature.
- Expand all the panels automatically while printing
- Different screen reader and browser pairings announce
<summary>element differently - Note: If you do not write
<summary>element inside<details>element, then the browsers will automatically add a<summary>element with default text asdetails. - We will be able to have smooth panel animations once
allow-discretetransition behavior,block-sizeandcalc-size(auto)are supported across browsers - We will be able to style the content of
<details>element using::details-contentonce it is supported across browsers. Check browser compatibility of::details-content