Skip to content

Instantly share code, notes, and snippets.

@pierrejoubert73
Last active November 30, 2024 16:31
Show Gist options
  • Save pierrejoubert73/902cc94d79424356a8d20be2b382e1ab to your computer and use it in GitHub Desktop.
Save pierrejoubert73/902cc94d79424356a8d20be2b382e1ab to your computer and use it in GitHub Desktop.
How to add a collapsible section in markdown.

How to add a collapsible section in markdown

1. Example

Click me

Heading

  1. Foo
  2. Bar
    • Baz
    • Qux

Some Javascript

function logSomething(something) {
  console.log('Something', something);
}

2. Code/Markdown

<details>
  <summary>Click me</summary>
  
  ### Heading
  1. Foo
  2. Bar
     * Baz
     * Qux

  ### Some Javascript
  ```js
  function logSomething(something) {
    console.log('Something', something);
  }
  ```
</details>

3. Tips & Tricks

3.1 Expand by Default

To have a collapsible section expanded by default, simply include the 'open' attribute within the <details> tag:

Hello World!
<details open>
  <summary>Hello</summary>
  World!
</details>

3.2 Customize Clickable Text

You can modify the appearance of the clickable text by adding styling inside the <summary> tags:

Wow, so fancy WOW, SO BOLD
<details>
  <summary><i>Wow, so fancy</i></summary>
  <b>WOW, SO BOLD</b>
</details>

3.3 Nested Collapsible Sections

NB: When including headings within collapsible sections, remember to add a new line after the <summary> tag.

Section A
Section A.B
Section A.B.C
Section A.B.C.D Done!
<details>
<summary>Section A</summary>
<details>
<summary>Section A.B</summary>
<details>
<summary>Section A.B.C</summary>
<details>
<summary>Section A.B.C.D</summary>
  Done!
</details>
</details>
</details>
</details>

Troubleshooting

  • If certain markdown or styling, such as # My Title, fails to render in the collapsible section, try adding a line break after the </summary> tag.
  • If your section fails to render, it might be malformed. Consider copying the functional examples provided here and building from there!
@ProphecyOak
Copy link

counterSorter.py

For a given file, either counts or sorts it and places the output in CounterSorterOutput by default.

  • If you are sorting, include an s or the word sort after the specified file.
  • If you are counting, include a c or the word count after the specified file.

For either option, you may:

  • Specify a designated output file using the -d or --dest flag.
  • Specify a sorting function using the -m or --method flag and a key from the SORT_FUNCTIONS dictionary in properties.py.
  • Invert the sort direction using the -r or --reverse flag.
  • Ignore the header of the file using the -s or --skip flag and a number of lines to skip.

For whatever reason, this works in the chat here but not in the readme for my repo.

<details><summary><h3>counterSorter.py</h3></summary>
 >For a given file, either counts or sorts it and places the output in `CounterSorterOutput` by default.
 >- If you are sorting, include an `s` or the word `sort` after the specified file.
 >- If you are counting, include a `c` or the word `count` after the specified file.
 >
 >For either option, you may:
 >- Specify a designated output file using the `-d` or `--dest` flag.
 >- Specify a sorting function using the `-m` or `--method` flag and a key from the `SORT_FUNCTIONS` dictionary in `properties.py`.
 >- Invert the sort direction using the `-r` or `--reverse` flag.
 >- Ignore the header of the file using the `-s` or `--skip` flag and a number of lines to skip.
</details>

This is the result in my repo:

image

Any idea why this might be happening?

@pierrejoubert73
Copy link
Author

@ProphecyOak I headed over to some online markdown editors and tested it there. None of them rendered the collapsible section.
They cannot interpret the elements like GitHub does (It is HTML, after all). I believe that whatever is rendering your markdown will look at those elements, see that they are HTML, and interpret them as best they can. Can you inspect those elements?

@moshiurse
Copy link

moshiurse commented Mar 6, 2024

@moshiurse, Could you paste your markdown here and see how it renders? If the behaviour is reproducible, we can debug it. If the behaviour is normal, then the problem is in your environment.

See Here

Sometimes with a root user, things might not work properly. So creating a new user with sudo permission is a better option.
<details>
<summary><h2>See Here</h2></summary>
  Sometimes with a root user, things might not work properly. So creating a new user with sudo permission is a better option.
</details>

Looks like it working in this comment but in my repo it is not working!!
For directly check the md file you can check this: https://github.com/moshiurse/moshiurse/blob/main/Cloud-Server-Setup.md

@pierrejoubert73
Copy link
Author

pierrejoubert73 commented Mar 6, 2024

@moshiurse Interesting. It looks fine to me. Perhaps it is browser-related. Which browser/version are you running?
Edit: Sorry, I just realized you said it looks fine here. But the fact that it still looks ok to me on your md but not for you is quite odd. Do you think it could be a responsive issue?
image

@moshiurse
Copy link

@moshiurse Interesting. It looks fine to me. Perhaps it is browser-related. Which browser/version are you running? Edit: Sorry, I just realized you said it looks fine here. But the fact that it still looks ok to me on your md but not for you is quite odd. Do you think it could be a responsive issue? image

I don't use h2 tag here
When i am using it looks like this
image
Now I update the md file you can see. https://github.com/moshiurse/moshiurse/blob/main/Cloud-Server-Setup.md

@thc282
Copy link

thc282 commented Mar 6, 2024

@moshiurse
about the tag problem
i have tried, if the h2 outside the details is fine. it won't have any new line in the summary. However all the content inside the details will becomes h2

And i think this just the github issue. In long ago, i have tried the same trick in my repo. It work well and dont have any newline, now that repo summary text just move to next line

@beatrizsmerino
Copy link

Hi @moshiurse!

I have the same problem, although it didn't happen a few days ago.

Here you can see something about:

I tried everything and in the end I had to use svg images.
In short, the problem is that a few days ago Github didn't treat h1 etc. as block elements, so the arrow and the title were seen side by side.

@DolevArtzi
Copy link

@Sterh20 the table rendering works without markup <summary>Click me</summary>.

@brunolnetto I was too hasty. Turns out you can make it work with summary section too. You just need to add additional empty line after summary section:

Click me

<details>

  <summary>Click me</summary>

  | Header 1 | Header 2 |
  | -------- | -------- |
  | Row 1    | Row 1    |
  | Row 2    | Row 2    |
  
</details>

Wanted to add that this also works for LaTeX, including double $$ blocks. see example:


Rendered Output:

Proof of variance of geometric

Reveal Proof To compute the variance of $X$, where $X \sim \text{Geom}(p)$, we'll start by finding the second moment. $$E[X^2] = E[X^2 \mid A]P[A] + E[X^2 \mid A^c]P[A^c]$$

Code:

 <details><summary>Reveal Proof</summary>
 To compute the variance of $X$, where $X \sim \text{Geom}(p)$, we'll start by finding the second moment. 
 $$E[X^2] = E[X^2 \mid A]P[A] + E[X^2 \mid A^c]P[A^c]$$
</details>```

@jhj0517
Copy link

jhj0517 commented Apr 5, 2024

Hi! I want to test if I can embed image inside detail.

demo Content1

Content2

ForegroundService

It works! very thanks.

@brendanmaguire
Copy link

Click The rest

@KelvinKaungDev
Copy link

@lebathang
Copy link

test Hello everyone here

code:

 <details>
 <summary>test</summary>
 <b>Hello everyone here<b>
 </details>

@vinser
Copy link

vinser commented Apr 29, 2024

Using this code in my project README.md on GitHub

### Setup and fine tuning
<details>
<summary><i><h4>1. Main configuration file</h4></i></summary>
For advanced sutup you can edit `config/config.yml` selfexplanatory configuration file.  
This file by default is located in `config` subfolder of program file location.
</details>

I get what it should be:

Setup and fine tuning

1. Main configuration file

For advanced sutup you can edit `config/config.yml` selfexplanatory configuration file. This file by default is located in `config` subfolder of program file location.

But when I use the same code on GitHub Pages with classic minima skin I get line break between marker and summary tip the same as moshiurse wrote above.
image

Are any thoughts how to fix this?

@mayank7j-shell
Copy link

Testing if really need to add indentation. Turns out, not really.

Click me
Header 1 Header 2
Row 1 Row 1
Row 2 Row 2

Code:

<details>

<summary>Click me</summary>

| Header 1 | Header 2 |
| -------- | -------- |
| Row 1    | Row 1    |
| Row 2    | Row 2    |
  
</details>

@tmarkovski
Copy link

tmarkovski commented Jun 4, 2024

You can also use code highlighting in the body or summary, with a caveat: must use <code>hello</code> block, and not backticks `hello` when in summary.

Code:

<details>
<summary>Contents of <code>file.txt</code></summary>

```
[File contents inside code block]
```
</details>

Rendered:

Contents of file.txt
[File contents inside code block]

@Mark-Landucci
Copy link

Is it possible to place a collapsible section in a table? To have several table rows that the user can expand or collapse?

@Mark-Landucci
Copy link

For example, can I place these in a table with columns and rows? I've been trying, but haven't figured out a way to do it correctly.

Dogs Likes to bark a lot.
Cats Likes to meow at night.
Birds Likes to fly away.

@Oednerich
Copy link

is there a way to put uploaded image files inside a collapsible section?
I'd like to put screenshots there, because even small ones are getting blown up in chat making it unnecessary difficult to navigate.
but all i get when doing it is this:

my uploaded screenshots ![jellyfin-idle](https://github.com/user-attachments/assets/73614b31-ba66-4182-aed5-f87525a35dd3) ![jellyfin-1x4kstream](https://github.com/user-attachments/assets/a8a94fde-c0d5-46c2-925d-de4ab7f57aa2) ![jellyfin-2x4kstream](https://github.com/user-attachments/assets/516a7da0-afbe-42a3-9a99-b48aa11a1657)

@jhj0517
Copy link

jhj0517 commented Aug 1, 2024

@Oednerich It works. You have to make sure there are two line breaks between each image.

images

Image1

Image2

<details>
  <summary>images</summary>

![Image1](https://gist.github.com/assets/97279763/4eb87d13-17b1-4384-bfc6-ba3369bc7223)

![Image2](https://gist.github.com/assets/97279763/4eb87d13-17b1-4384-bfc6-ba3369bc7223)

</details>

@Oednerich
Copy link

@jhj0517 thank you! what a silly mistake, I thought line breaks wouldn't matter

@BenKohls
Copy link

I found this while looking into a similar issue with Gitlab readme files. It seems that the issue is with the devault css on the h1-h* tags. Adding an inline style resolved the issue for me. Borrowing from the example above :

<details>
<summary><i><h2  style="display:inline-block">1. Main configuration file</h2></i></summary>
For advanced sutup you can edit `config/config.yml` selfexplanatory configuration file.  
This file by default is located in `config` subfolder of program file location.
</details>

1. Main configuration file

For advanced sutup you can edit `config/config.yml` selfexplanatory configuration file. This file by default is located in `config` subfolder of program file location.

@jcdiv47
Copy link

jcdiv47 commented Aug 13, 2024

@BenKohls Thanks! Adding the inline style also worked for me.

@ooker777
Copy link

ooker777 commented Sep 2, 2024

I'd like to give emoji to this , but there is no option. Why is that?

@lut777
Copy link

lut777 commented Sep 5, 2024

Is there a way to collapse a code block?
When I write down some blogs, I always want to record the source code for further explanation.
However, a long code block is really a pain in the ass in writing and reading.

@jhj0517
Copy link

jhj0517 commented Sep 5, 2024

@lut777 Use ``` for code block ( ''' for explanation )

<details>
  <summary>code block</summary>

'''
code block
code block
'''

</details>
code block
code block
code block

@lut777
Copy link

lut777 commented Sep 6, 2024

@lut777 Use ``` for code block ( ''' for explanation )

<details>
  <summary>code block</summary>

'''
code block
code block
'''

</details>

code block

code block
code block

seems good. Thank you!
In Typora it does not work. I think I need to find a new editor now...
tried in visual studio, failed.

@GerardoPCO
Copy link

GerardoPCO commented Sep 24, 2024

<details>
<summary><h5>See Here</h5></summary>

image

But it is going down. Can you help me to fix?

adding "open" works for me: <details open><summary>My summary</summary></details>

My summary

@philiprhoades
Copy link

philiprhoades commented Oct 20, 2024

This is very nice - thanks!

Do you have a suggestion for a simple theme (Jekyll?) that would include clickable bars for [sub]sections and for subsections to be indented appropriately? - like this:

http://pricom.com.au/gc.png

where greyed [sub]sections are unopened.

@GerardoPCO
Copy link

GerardoPCO commented Oct 21, 2024

This is very nice - thanks!

Do you have a suggestion for a simple theme (Jekyll?) that would include clickable bars for [sub]sections and for subsections to be indented appropriately? - like this:

http://pricom.com.au/gc.png

where greyed [sub]sections are unopened.

What about nesting them, add "open" to the ones u want open from the start and nothing/default behaviour to the grey one? (https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab#33-nested-collapsible-sections) ?

@raynbowbrite
Copy link

raynbowbrite commented Oct 22, 2024

I'm working on trying to use this in a wiki sidebar where there is nesting inside of nesting, and the nested parts are also links.
Here's what it basically looks like so far:

MISC

It wasn't working at all at first, but once I added all the blanks lines it started to mostly work. The functionality is there, but I have two nitpicks.

Does anyone know how to get 'stuff c' and 'stuff d' at the same level of indention as stuff a,b and e.
And does anyone know how to get the spacing around 'stuff c.1' and 'stuff d.1'


<details>

<summary> MISC </summary>

  - [stuff a](stuff-a)
  - [stuff b](stuff-b)


    <details>

    <summary> <a href="Link to Stuff C">Stuff C</a> </summary>

    - [Stuff c.1](stuff-c-1)

    </details>

    <details>

    <summary> <a href="Link to Stuff D">Stuff D</a> </summary>

      - [Stuff D.1](stuff-d-1)

    </details>

  - [Stuff e](stuff-e)

</details>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment