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

[aaronamm]

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.

[aaronamm]

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.

[xoofx]

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.

[aaronamm]

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