Docusaurus v2 collapsible section in markdown

Question

Is there an easy way to create a collapsible section in Docusaurus V2 markdown?

Would look for something similar to this on GitHub: https://gist.github.com/joyrexus/16041f2426450e73f5df9391f7f7ae5f

Answer 1

All you had to do was to add the gist code in your markdown file, I did the same and it worked out for me.

Check this out - HTML details tag

<details><summary>CLICK ME</summary>
<p>

#### yes, even hidden code blocks!

```python
print("hello world!")
```

</p>
</details>

Answer 2

As Germa pointed out, you can include HTML in Markdown, so using <details> and <summary> tags work. Also, since Docusaurus uses MDX, which allows React components in MDX, you can always write your own React components and embed them in your documents without needing support from Docusaurus for your use case.

Answer 3

If you want to use the React Component:

import Details from '@theme/MDXComponents/Details';

export default function Collapse (props: { children: React.ReactNode; title?: string }) {
    const { children, title = "Collapse" } = props;

    return (
        <Details>
            <summary mdxType="summary">{title}</summary>

            {children}
        </Details>
    );
}

And then in markdown:

import Collapse from '@site/src/components/Collapse';

# Markdown

<Collapse>

### Hidden content

```js
function someFn() {
   return;
}
```

</Collapse>

Docusaurus Official Repo component link