CLICK ME
yes, even hidden code blocks!
print("hello world!")
@darshan315 It seems like we need to use CSS in-order to fix the in-Line problem.
details summary > * { display: inline; }
-A couple notes on this technique. First, I recommend using inline, and not inline-block, as the line wrapping issue still occurs with inline-block when the heading text extends beyond one line.
-Second, rather than changing the display value of the nested elements, you might be tempted to replace the <summary>
element’s default display: list-item value with display: flex. At least I was! However, if we do this, the arrow marker will disappear. Whoops!
Whoop, thanks for posting this. Makes for a much more readable document when including lengthy output sections (like tracebacks, etc...)
wonderful, I was looking for this for a long time.
THANKS
I saw @antranapp's comment and figured out how to do it. here it is
<details open>
<summary>click to collapse</summary>
this one starts expanded because of the "open"
</details>
this one starts expanded because of the "open"
Is there a way to have this work with links without having to write the htlm directrly?
For mentioning links in Markdown, refer to this.
you can also use that in the collapsable section.
TESST
Any advice on how to get it to work in GitHub Pages? In GitHub it looks beautiful.
on the rendered page, much less so.
@Laura-Novich-OBW - you probably want to check out the CSS sections of https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
in or to a foreign country. (= overseas)
If you are accustomed to something, you know it so well or have experienced it so often that it seems natural, unsurprising, or easy to deal with.
this one starts expanded because of the "open"
@niceguysforhelp How did you make the header collapsible above (that too in line). Mine comes below one line and not beside the arrow.
Header