uzluisf/collapsible-sections.md

## collapsible-sections.md

      
    Raw
  

              collapsible-sections.md
            
          
    Collapsible Sections

You can get collapsible blocks in Github Markdown by using the <details></details> and <summary></summary> tags. For example,
<details>
<summary>Poe's Law (click to expand)</summary>
A humorous law of Internet forums, stating that "The best way to get the right answer on
the Internet is not to ask a question; it's to post the wrong answer."
</details>
renders as

Poe's Law (click to expand)
A humorous law of Internet forums, stating that "The best way to get the right answer on
the Internet is not to ask a question; it's to post the wrong answer."

Non-collapsed Sections

In order to have non-collapsed sections by default, use <details open>. Thus
<details open>
<summary>Poe's Law (click to close)</summary>
A humorous law of Internet forums, stating that "The best way to get the right answer on
the Internet is not to ask a question; it's to post the wrong answer."
</details>
renders as

Poe's Law (click to close)
A humorous law of Internet forums, stating that "The best way to get the right answer on the Internet is not to ask a question; it's to post the wrong answer."

Rule

If you've a Markdown block, then you need an empty line after the  tag. Otherwise the Markdown block won't render.
For example, the code block won't render here:
<details>
<summary>Encoding a string as UTF-8 in Raku</summary>
    say "Hello!".encode('utf-8');
    # OUTPUT: «utf8:0x<48 65 6C 6C 6F 21>␤»
</details>

Encoding a string as UTF-8 in Raku
    say "Hello!".encode('utf-8');
    # OUTPUT: «utf8:0x<48 65 6C 6C 6F 21>␤»

but this does render:
<details>
<summary>Encoding a string as UTF-8 in Raku</summary>

    say "Hello!".encode('utf-8');
    # OUTPUT: «utf8:0x<48 65 6C 6C 6F 21>␤»

</details>

Encoding a string as UTF-8 in Raku
say "Hello!".encode('utf-8');
# OUTPUT: «utf8:0x<48 65 6C 6C 6F 21>␤»