8

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

3 Answers 3

16

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>
2
  • @dakami, if it's working then please accept the answer so that the question can be closed. As it'll show that Docusaurus questions are being answered. Apr 8, 2020 at 2:03
  • Is there any possibility to keep the list in details section? Feb 15, 2022 at 13:05
1

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.

0

If you want to use the React Component:

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

export default function Collapse (props: IProps) {
    const { children } = props;

    return (
        <Details>
            <summary mdxType="summary">Collapse</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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.