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

Discover some handy customizations for your collapsible sections.

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!

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