HTML: alternate text in a summary-details structure

user_1593239 0
Viewed 23

I just got familiar summary-details structure. For instance, the simple example:

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

Which is very cool of course.

Now, is there a way to make the Details text switch to, say, Collapse once it is pressed and the details are shown?

Thanks!

html
1 Answers

You can do it with CSS only.

details[open] summary::after {
  content: attr(data-open);
}

details:not([open]) summary::after {
  content: attr(data-close);
}
<details>
    <summary data-open="Collapse" data-close="Details"></summary>
    Something small enough to escape casual notice.
</details>

user_148071110
Related