An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Some of Our Sources
- Techcrunch
- Web Designer Wall
- Joshua Blankenship
- Smashing Magazine
- Smashing Apps
- Fuel Your Creativity
- Web Designer Depot
- Web Resource Source
- Dev To
- The Verge
Help Webnuz
Referal links:
How to change details label when open/closed without JavaScript
I wish the details element would support different labels (provided by the summary tag) for its open and closed states.
Consider a label of "Closed, click to open" when the details element is closed and "Open, click to close" when open:
Sadly only one summary tag is supported by the details element. However you can use an empty summary with a ::before pseudo-element to implement this.
Save the following to a file:
<html> <body> <style> #widget1 div { padding-inline-start: 1em; max-width: 20em;} #widget1 summary::before { content: "Closed, click to open";} #widget1[open] summary::before { content: "Open, click to close";} #widget1[open] summary { height: 2em;} </style> <p> Text before details.</p> <details id="widget1"> <summary></summary> <div> A widget can be in one of two states. The default closed state displays only the triangle and the label inside summary (or a user agent-defined default string if no summary). </div> </details> <p>Text after details.</p> <body></html>to experiment.
The second and third style lines are where the magic happens.
Note that it might not be accessible. I didn't try to see if adding a live region aria label to the summary would cause the label change to be announced. I suspect it will not, but refining this is left as an exercise for the reader. Add your experimental findings to the comments below.
Original Link: https://dev.to/rouilj/how-to-change-details-label-when-open-closed-without-javascript-1n3c
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To