nested, indented lists with collapsable sections

Question

How to create a markdown list with:

• each item being collapsible or not
• items are indented, sub-items are indented 2 times etc ...
• each item "body" containing at each level having the ability to carry regular md, including sub-list, also collapsible.. etc

this page presents some solutions, but the most viable one is pure HTML, there no point of MD anymore

Answer 1

We have to play with details, summary, and ... spaces! Spaces?? Yes:

• how you indent your whole section body
• where you put your closing details tag on the closing line.
  </details> tag must be indented as if it was part of the "body" of your <detail>.

Spaces are what makes it work, or not.

Here is a 2-level list with collapsable elements, and sub-elements, with some other regular markdown items.

Example rendered in github. Works on VS-Code too. Not sure which other engine supports it.

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>

As you can see, not all engines supports it though... like SO one:

• Section 1 with a link
  • subsection 2 with a link
    • a list
    • with some stuff

    and other things

    • [x] 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 no real alternative to 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