DEV Community

loading...

How to add Dropdown in Markdown ??

asyraf profile image Amirul Asyraf ・3 min read

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)

pic
Editor guide
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.