Experimenting with the <details> tag
Jun. 14th, 2025 12:02 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
sanguinityExperimenting with a thing pangolin20 advised over at gremdark's journal:
...and here is the additional detail inside the tag.
...and here is the additional detail inside the tag.
The second one has
Edit: works as advertised! And with the second one, it is much more obvious that you can click both the arrow and the text and that something will happen if you do.
pangolin20 advised over at gremdark's journal:This is a "details" tag with no additional styling...
...and here is the additional detail inside the tag.
This is a "details" tag styled with "cursor:pointer"...
...and here is the additional detail inside the tag.
The second one has
style="cursor:pointer" placed inside the details tag, and should make the whole thing more obviously interactable-with for mouse-users. (They should both be interactive via keyboard navigation.)Edit: works as advertised! And with the second one, it is much more obvious that you can click both the arrow and the text and that something will happen if you do.
