HTML: alternate text in a summary-details structure

Question

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!

score 3 · Accepted Answer · answered Mar 30 '22 at 14:28

3

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>

answered Mar 30 '22 at 14:28

Maik Lowrey

Can I use it within a Jupyter notebook? – Ori5678 Mar 31 '22 at 10:34
@Ori5678 You can use it on all devices. CSS is interpreted by the browser. It would be nice if my answer was helpful to accept this answer. If you like it you can upvote , too. And the best would be to get a thank you ;-) – Maik Lowrey Mar 31 '22 at 10:50
1

You're right of course. Manners... Thanks a lot, really. Just still not sure how to use that. Usually I'd use from IPython.display import Markdown as md then md('
...') and not sure how to add the CSS part
– Ori5678 Mar 31 '22 at 10:57
@Ori5678 No problem ;-) Thanks for your feedback. What do you mean with: "Just still not sure how to use that"? – Maik Lowrey Mar 31 '22 at 10:59
1

I was in the midst of an edit... – Ori5678 Mar 31 '22 at 11:00
`from IPython.core.display import HTML HTML(""" """)` I found it here: https://stackoverflow.com/a/33570738/14807111 – Maik Lowrey Mar 31 '22 at 11:04
@Ori5678 You welcome :-)! – Maik Lowrey Mar 31 '22 at 11:16

1 Answers1