DEV Community

Amirul Asyraf
Amirul Asyraf

Posted on

How to add Dropdown in Markdown ??

Ever wonder how most of the project's README file does this stuff ??

Screenshot 2021-03-22 at 07.19.18
When we click, it will open the dropdown.
Screenshot 2021-03-22 at 07.19.51


Cool, let's learn that stuff. Btw, the syntax is so freaking easy 😂.

Code

Ok, now copy this code;

<details>
<summary>How do I dropdown?</summary>
<br>
This is how you dropdown.
</details>
Enter fullscreen mode Exit fullscreen mode

To give it a try, use this online markdown editor. Then, come back to this post for more information 😊.


So far so good ??

Easy right. The basic syntax is just;

  • <details> for the dropdown wrapper
  • <summary> for the dropdown title
  • The dropdown contents

Here are another tips 👇👇👇

1) How to start with the dropdown shown instead of close?

This one is simple. You just need to add open after the details word. For example;

<details open>
<summary>I automatically open</summary>
<br>
Waaa, you see me. I thought I would be hidden ;p .
</details>
Enter fullscreen mode Exit fullscreen mode

It will automatically open the dropdown.

2) You do it wrong !!!

If you try this code;

<details>
<summary>Heading</summary>
    + markdown list 1
        + nested list 1
        + nested list 2
    + markdown list 2
</details>
Enter fullscreen mode Exit fullscreen mode

Screenshot 2021-03-22 at 19.52.40

You will get a weird result. Not what you expected. So, you instead do it in HTML syntax.

<details>
<summary>Heading</summary>
<ul>
<li> markdown list 1</li>
<ul>
<li> nested list 1</li>
<li> nested list 2</li>
</ul>
<li> markdown list 2</li>
</ul>
</details>
Enter fullscreen mode Exit fullscreen mode

It works but I just want to tell you that you do it wrongly 😂. You just need to add space between the <summary> tag with the dropdown content. No need to add HTML stuff. Like this;

<details>
<summary>Heading</summary>
<!--All you need is a blank line-->

    + markdown list 1
        + nested list 1
        + nested list 2
    + markdown list 2
</details>
Enter fullscreen mode Exit fullscreen mode

😉

3) You also can nested the dropdown 🔥

<details>
<summary>Well</summary>

<details>
<summary>Try this</summary>

 <details>
 <summary>The other one</summary>

   <details>
   <summary>Ok, try this</summary>
   You got me 😂
   </details>
 </details>
</details>
</details>
Enter fullscreen mode Exit fullscreen mode

4) Add Code into the dropdown 🚀

Same as the usual markdown.

Screenshot 2021-03-22 at 16.35.13

The above image will get this;

Screenshot 2021-03-22 at 16.35.31

5) Make a Collapsible Content

The way we want to do this is a little bit different. This is the result;

Screenshot 2021-03-23 at 08.56.58

When we click it, the collapsible content is superb ;p

Screenshot 2021-03-23 at 08.57.18

You can see this gist to look at the code.

6) Add Bullet list into the Dropdown

This is easy. YOu just add + before the list to make a bullet list.

<details>
<summary>Heading1</summary>

some text
+ <details>
    <summary>Heading1.1</summary>

    some more text
    + <details>
        <summary>Heading1.1.1</summary>
        even more text
      </details>
   </details>
</details>
Enter fullscreen mode Exit fullscreen mode

The result will be like this;
Screenshot 2021-03-23 at 09.02.24


Use Case

Recently, I create an awesome-list repository about Hotwire stuff. YOu can see the project here

1) Auto open dropdown

I use the auto-open dropdown to show the Hotwire stack.

Screenshot 2021-03-23 at 09.04.07

2) Long list

The second one is for showing the long list of Websites, Open-Source, and Resources. I just want to make my README clean. Try to open it ;p.

Screenshot 2021-03-23 at 09.07.07

The End


resources;

1 2 3 4 5

Discussion (2)

Collapse
djmtype profile image
Scott Rod

So basically use HTML inside markdown.

Collapse
asyraf profile image
Amirul Asyraf Author

Yeah. I think it depends on how complex your dropdown's content. For my project, I just use markdown. Simply # for title and - for bullet point.