Question: is there any example code for creating collapsible/accordion content? #626

New Issue

claunia · 2026-01-29T14:41:28Z

claunia commented

2026-01-29 14:41:28 +00:00

Originally created by @aaronamm on GitHub (Sep 25, 2023).

Hello everyone, I would like to create an extension to generate collapsible/accordion content.
Given this example:
We have Markdown content as:

# header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Praesent consectetur ante ac mi pulvinar tincidunt.

I want it to be rendered to HTML as:

<details class='collapse-content'>
  <summary class='title'>header</summary>

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Praesent consectetur ante ac mi pulvinar tincidunt. 
</details>

For Remark (the Node.js implementation project), I can make a custom plugin as the following code:
https://github.com/codesanook/only-minidisc-static-site/blob/main/only-minidisc/plugins/remark-collapse/index.js#L26-L43

However, I still couldn't find something like markdownAST.children nodes that I can loop to create a pair of summary and details tags.

I would be glad if you could give me some suggestions or example code that I can create a Markdig extension to render a collapsible/accordion content.

Thank you so much.

Originally created by @aaronamm on GitHub (Sep 25, 2023). Hello everyone, I would like to create an extension to generate collapsible/accordion content. Given this example: We have Markdown content as: ``` # header Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur ante ac mi pulvinar tincidunt. ``` I want it to be rendered to HTML as: ```html <details class='collapse-content'> <summary class='title'>header</summary> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur ante ac mi pulvinar tincidunt. </details> ``` For Remark (the Node.js implementation project), I can make a custom plugin as the following code: https://github.com/codesanook/only-minidisc-static-site/blob/main/only-minidisc/plugins/remark-collapse/index.js#L26-L43 However, I still couldn't find something like ` markdownAST.children` nodes that I can loop to create a pair of summary and details tags. I would be glad if you could give me some suggestions or example code that I can create a Markdig extension to render a collapsible/accordion content. Thank you so much.

claunia added the question label 2026-01-29 14:41:28 +00:00

claunia commented

2026-01-29 14:41:29 +00:00

@aaronamm commented on GitHub (Sep 28, 2023):

DefinitionList extension might be a good one to be applied to what I need.
DefinitionListParser

CC @xoofx I would be glad if you could give some suggestion/idea.
Thanks.

@aaronamm commented on GitHub (Sep 28, 2023): DefinitionList extension might be a good one to be applied to what I need. [DefinitionListParser](https://github.com/xoofx/markdig/blob/master/src/Markdig/Extensions/DefinitionLists/DefinitionListParser.cs) CC @xoofx I would be glad if you could give some suggestion/idea. Thanks.

claunia commented

2026-01-29 14:41:29 +00:00

@xoofx commented on GitHub (Sep 28, 2023):

However, I still couldn't find something like markdownAST.children nodes that I can loop to create a pair of summary and details tags.

You can use the various MarkdownObject.Descendants extension methods to navigate the tree structure.

The main problem you will face is that a header # header doesn't form a block with the rest of your paragraph in CommonMark, so these are treated separately as consecutive blocks (a HeaderBlock and a ParagraphBlock). That means that you need to navigate the siblings blocks in order to find the next header (that is of same level 1). In order to navigate siblings, you might have to go to the parent, which should be a ContainerBlock, find the HeaderBlock that you were processing for, and iterate on the following siblings from the parent.

Then you might want to create your own kind of ContainerBlock to wrap the header and the following paragraph into it, and then create associated HtmlRenderer, and add it to the Html renderers when configuring the pipeline for rendering.

It is still quite some work.

@xoofx commented on GitHub (Sep 28, 2023): > However, I still couldn't find something like markdownAST.children nodes that I can loop to create a pair of summary and details tags. You can use the various `MarkdownObject.Descendants` [extension methods](https://github.com/xoofx/markdig/blob/master/src/Markdig/Syntax/MarkdownObjectExtensions.cs) to navigate the tree structure. The main problem you will face is that a header `# header` doesn't form a block with the rest of your paragraph in CommonMark, so these are treated separately as consecutive blocks (a `HeaderBlock` and a `ParagraphBlock`). That means that you need to navigate the siblings blocks in order to find the next header (that is of same level 1). In order to navigate siblings, you might have to go to the parent, which should be a `ContainerBlock`, find the `HeaderBlock` that you were processing for, and iterate on the following siblings from the parent. Then you might want to create your own kind of `ContainerBlock` to wrap the header and the following paragraph into it, and then create associated `HtmlRenderer`, and add it to the Html renderers when configuring the pipeline for rendering. It is still quite some work.

claunia commented

2026-01-29 14:41:31 +00:00

@aaronamm commented on GitHub (Oct 2, 2023):

@xoofx thank you so much. Your suggestion is very useful. I think I've got all required information to create collapsible content.

@aaronamm commented on GitHub (Oct 2, 2023): @xoofx thank you so much. Your suggestion is very useful. I think I've got all required information to create collapsible content.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/markdig#626