How to add a collapsible section in markdown.

markdown-details-collapsible.md

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!

Title

content

<details>
  <summary>
    <h2>
      Title
    </h2>
  </summary>
  content
</details>

Can you nest them?

Can you nest them?

And it can also be used to collapse quotations

:)

> <details> <summary> And it can also be used to collapse quotations </summary>
> <h1> :) </h1>
> </details></details>

Is it also possible to have a "expand/collapse all" button?

A <summary> element is a button, so anything inside that element will be marked as presentational. It might provide the visual presentation you wish, but a user with a screen reader will not know that it's a heading.

This might not matter to you (anyone reading this) personally, but it would matter to a user with assistive technology. So I guess, just a heads up.

For folks who want to read more for their own self-education:

• https://daverupert.com/2019/12/why-details-is-not-an-accordion/
• https://melsumner.github.io/details-as-a-menu

Thanks for sharing. It would be perfect if you could mention the default can be opened by using <details open> at the beginning.

Thanks for sharing. It would be perfect if you could mention the default can be opened by using <details open> at the beginning.

Done! Added a new tips section. I'll review the comments and add things that are not too specific, obscure, or niche.

I'll consider adding an advanced section for the more technical things in time.

Sorry for being such a bad dad to this thread.

@sahil743 the style was not applied. Please, try to do it again.

Click me

Heading

1. Foo
2. Bar
   • Baz
   • Qux

Some JavaScript

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

Who are you?

Who are you?

I am Nitkarsh. Who are you? Why are you disturbing me, bitch!!

i test stuff

Nested details:

• 1 Introduction

  • 1.1 Second Level 1

    • 1.1.1 Third 1a
    • 1.1.2 Third 2a
    • 1.1.3 Third 3a
  • 1.2 Second Level 2

    • 1.2.1 Third 1b
    • 1.2.2 Third 2b
    • 1.2.3 Third 3b
  • 1.5 Alone 1
  • 1.6 Alone 2

Code:

  * <details><summary>1 <a href="#"> 1- Introduction</a></summary><ul>
     <li><details><summary> 1.1 <a href=""> Second Level 1 </a> </summary> <ul> 
           <li>1.1.1 <a href=""> Third 1a </a> </li>
           <li>1.1.2 <a href=""> Third 2a</a> </li>
           <li>1.1.3 <a href=""> Third 3a</a> </li>
     </ul></details></li> <!-- End 1 -->
     <li><details><summary> 1.2 <a href=""> Second Level 2 </a> </summary> <ul> 
           <li>1.2.1 <a href=""> Third 1b</a> </li>
           <li>1.2.2 <a href=""> Third 2b</a> </li>
           <li>1.2.3 <a href=""> Third 3b</a> </li>
     </ul></details></li> <!-- End  2-->
     <li>1.5 <a href=""> Alone 1</a> </li>
     <li>1.6 <a href=""> Alone 2</a> </li>
   </ul> <!-- End -->
  </details>

You're welcome

Is their a way to create a collapsible table?
I tried but got this:

Click me

| Header 1 | Header 2 | | -------- | -------- | | Row 1 | Row 1 | | Row 2 | Row 2 |

<details>
  <summary>Click me</summary>
  | Header 1 | Header 2 |
  | -------- | -------- |
  | Row 1    | Row 1    |
  | Row 2    | Row 2    |
</details>

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

@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

Header 1	Header 2
Row 1	Row 1
Row 2	Row 2

<details>

  <summary>Click me</summary>

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

Marvelous! 🥂

Block quotes don't work

[!NOTE]
Not working :(

Note

It works here

<details>

<summary>Block quotes don't work</summary>

> [!NOTE]
> Not working :(

</details>

A few issues:

1. Nesting only goes 4 levels deep
2. HTML code in a nested details tag messes up the accordion

Invalid Code Example

• Trying to write an example here also breaks everything

<details>
<summary><h1>H1</h1></summary>

> :warning: Issue: Doesn't show header underline


```markdown
<details>
<summary>First Level</summary>
## Fun Content

<details>
<summary>2nd Level with a Code Block of a Details Tag</summary>

```markdown
<details>
<summary>Details Tag inside an embedded markdown code block</summary>
## Embedded Fun Content
</details>

``` ```

H1

⚠️ Issue: Doesn't show header underline

Code

<details>

<summary><h1>H1</h1></summary>

# H1 Inside

## H2

### H3

#### H4

##### H5
</details>

H1 Inside

H2

H3

H4

H5

H2

⚠️ Issue: Doesn't show header underline

H1 Inside

H2

H3

H4

H5

H3

H1 Inside

H2

H3

H4

H5

Embedded Headers

H1 Embedded with Nested Details with Headers

⚠️ Nesting only goes 4 levels deep

• H5 doesn't show content even though markdown goes 5 levels deep

H1

H2

H3

H4

H5

A Sixth Level for Fun and Breakage

H1 Inside

H2

H3

H4

H5

H1 Inside

H2

H3

H4

H5

H1 Inside

H2

H3

H4

H5

H1 Inside

H2

H3

H4

H5

H1 Inside

H2

H3

H4

H5

H1 Inside

H2

H3

H4

H5

H3

H4

H5

You're welcome

There is kinda no point. It's not markdown anymore, it's "just" pure - yet valid - HTML

Here is something I came up with that works. An indented list with collapsable sections.
Each section can have it's own re-indented, list, with collapsable items, + regular MD content

The tricky part is how GH-flavored-md react to spaces and such. You have to indent your whole section in a specific way, and your closing </details> tag must be indented as if it was part of the body

For it to work, I suggest you keep the spaces and newlines intact

• Section 1 with a link

  • subsection 2 with a link

    • a list
    • with some stuff

    and other things

    • like
    • a task list
  • another subsection

    a. with another list
    b. and some other stuff
    d. and,
    more,
    classic,
    md
    e. no need of html

  • last sub-section

    blablabla

    def some_code
      puts "Rails is so cool"
    end

  • a random not collapsable section

    legacy. Should be restructured.

    console.log("look what I found, a new js framework. Still nothing even close to being as efficient as rails though...")

  • and another collapsable section

    ...

• section 2

  some parent content

  and another list

  • section 2.1

    and some content

  • section 2.2

    and some content

  • section 2.3
    and some no collapsed content

the code:

- <details open>
  <summary><a href="#">Section 1 with a link</a></summary>

  - <details>
    <summary><a href="../src/actions/">subsection 2 with a link</a></summary>

    - a list
    - with some stuff

    > and other things

    - [x] like
    - [ ] a task list 

    </details>

  - <details>
    <summary><b>another subsection</a></summary>

    a. with another list
    b. and some other stuff
    d. [and](),
      [more](),
      [classic](),
      [md]
    e. _no need_ __of html__
    </details>

  - <details>
    <summary>last sub-section</a></summary>

    blablabla

    ```rb
    def some_code
      puts "Rails is so cool"
    end
    ```
    </details>

  - a random not collapsable section
    > legacy. Should be restructured.

    ```js
    console.log("look what I found, a new js framework. Still no real alternative to rails though")
    ```

  - <details>
    <summary>and another collapsable section</summary>

    ...
  </details>

- <details>
  <summary>section 2</summary>
      
  some parent content

  and another list

  - <details>
    <summary>section 2.1</summary>

      and some content
    </details>

  - <details>
    <summary>section 2.2</summary>

      and some content
    </details>
  
  - section 2.3
    and some no collapsed content

</details>

Block quotes don't work
Note

It works here

<details>

<summary>Block quotes don't work</summary>

> [!NOTE]
> Not working :(

</details>

Seems like a problem with all alerts inside of divs. I made a comment on the thread that introduced alerts here: https://github.com/orgs/community/discussions/16925#discussioncomment-8383959

@fightling Not without JavaScript.

@MelSumner This is a really important point. I think that a lot of us will probably shrug and go ahead anyway as we "need" accordion in Markdown (unfortunately). I read the first article you linked. What do you think the fix here might be? Is it up to the screen-reading software to handle the case of details being used in this way? Should accessibility be incorporated into the HTML standard? Edit: it looks like one way around this would be to precede the details section with a Markdown heading,

# Heading
<details>
  <summary>Read More</summary>
  Content
</details>

@TidbitSoftware it would be something like

<details>
  <summary>Read more about penguins</summary>
  <div class="content">
    <p>Interesting paragraph text about penguins</p>
    <p>Another interesting bit of paragraph text about penguins</p>
  </div>
 </details>

Also, for anyone interested, you CAN get the summary to work as a title; you just have to use html tags:

This is an h2 title

And it is collapsible!

Here's how it works:

<details><h2><summary>This is an h2 title</summary></h2>
Content goes here.
</details>

Its not working!!

This is an h2 title

Content goes here.

@moshiurse You put the <h2> tags in the wrong place. They go inside <summary>, not outside.

This is an h2 title

Content goes here.

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

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

@moshiurse You mean the new line after the caret?

@moshiurse You mean the new line after the caret?

Yes it is added as a next line

@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.

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:

Any idea why this might be happening?

@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?