Indentation of Nested Expendable Sections

13 June 2024 - 3 mins read time
Tags: Markdown HTML

To make the nested collapsable sections with proper indentation, the HTML tag <details> is need to create a collapsable sections, but the content inside should be written in HTML, and I do want to write the content in Markdown to make advantages of the ease of intentaion.

The HTML tag <details> should be also followed by <summary> tag to specify a visible heading for the details. If I nest a few <details>, how do I indent the whole section body? Where should I put my closing details tag on the closing line? </details> tag must be indented as if it was part of the “body” of the <detail> tag. After two hours researching, I found a way to solve it by following this thread.

Solution to my page

The whole contents are not markdown anymore, it’s “just” pure - yet valid - HTML. Each section can have it’s own re-indented lists with collapsable items, and regular markdown content. The tricky part is how GitHub-flavored Markdown reacts 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 were part of the body. Another syntax <details markdown="1"> is used to parse Markdown. markdown="1" is a common, albeit non-standard, method to alter the behavior of a Markdown parser. Specifically, standard Markdown ignores Markdown syntax wrapped inside block-level HTML tags. With an appropriate extension enabled, adding markdown="1" as an attribute to the wrapping HTML tag will instruct the Markdown parser to not ignore Markdown syntax within the tag. However, you need to be using a Markdown implementation which includes support for the feature and enable the feature if it is not enabled by default.

This is how it looks like:

• Section 1

  • subsection 1

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

  • 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

- <details open markdown="1">
  <summary>Section 1</summary>

  - <details markdown="1">
    <summary>subsection 1</summary>

    - a list
    - with some stuff

    > and other things

    - [x] like
    - [ ] a task list 

    </details>

  - <details markdown="1">
    <summary><b>another subsection</b></summary>

    a. with another list

    b. and some other stuff

    d. [and](),

      [more](),

      [classic](),

      [md]
    
    e. _no need_ __of html__
    </details>

  - <details markdown="1">
    <summary>last sub-section</summary>

    blablabla

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

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

  - <details markdown="1">
    <summary>and another collapsable section</summary>

    ...
  </details>

- <details markdown="1">
  <summary>section 2</summary>
      
  some parent content

  and another list

  - <details markdown="1">
    <summary>section 2.1</summary>

      and some content
    </details>

  - <details markdown="1">
    <summary>section 2.2</summary>

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

  </details>