How to add Dropdown in Markdown ??
Tags: markdown, howto, html, beginners
Published: 2021-03-23 01:09:58

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

![Screenshot 2021-03-22 at 07.19.18](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbv4wqeo8gyv9ig1zday.png)
**When we click, it will open the dropdown.**
 ![Screenshot 2021-03-22 at 07.19.51](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bprovnuf2ik8d7ooodab.png)

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

# Code

Ok, now copy this code;
```markdown
<details>
<summary>How do I dropdown?</summary>
<br>
This is how you dropdown.
</details>
```
To give it a try, use this [online markdown editor](https://markdown-editor.github.io/). 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;

```markdown
<details open>
<summary>I automatically open</summary>
<br>
Waaa, you see me. I thought I would be hidden ;p .
</details>
```
It will automatically open the dropdown.

## 2) You do it wrong !!!

If you try this code;
```markdown
<details>
<summary>Heading</summary>
    + markdown list 1
        + nested list 1
        + nested list 2
    + markdown list 2
</details>
```

![Screenshot 2021-03-22 at 19.52.40](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tocd58ydp80qw31eoabi.png)
 
You will get a weird result. Not what you expected. So, you instead do it in HTML syntax.
```html
<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>
```

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;
```markdown
<details>
<summary>Heading</summary>
<!--All you need is a blank line-->

    + markdown list 1
        + nested list 1
        + nested list 2
    + markdown list 2
</details>
```

😉

## 3) You also can nested the dropdown 🔥

```markdown
<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>
```

## 4) Add Code into the dropdown 🚀

Same as the usual markdown.

![Screenshot 2021-03-22 at 16.35.13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btqe3cqma1t7sqz1atgq.png)

**The above image will get this;**

![Screenshot 2021-03-22 at 16.35.31](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y915hrimq1erz7b2vear.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ta0fuuuf1fuz1rinh8n.png)

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

![Screenshot 2021-03-23 at 08.57.18](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqn7lmlc17t7apk8ohsb.png)
  
You can see this [gist](https://gist.github.com/ImminentFate/931bd780de7fb2aecc376e7af446c5df) 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.

```markdown
<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>
```
The result will be like this;
![Screenshot 2021-03-23 at 09.02.24](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qdhg5ahrd8uebly2ce7.png)
 
---

# Use Case

Recently, I create an awesome-list repository about [Hotwire](http://hotwire.dev/) stuff. YOu can see the project [here](https://github.com/asyraffff/Hotwire-in-action)

### 1) Auto open dropdown

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

![Screenshot 2021-03-23 at 09.04.07](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohz9xkjozibasbsh2476.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v00x4xgta3rm2nxmzj2x.png)
 

**The End**

---

resources;

[1](https://gist.github.com/citrusui/07978f14b11adada364ff901e27c7f61) [2](https://chrisfrew.in/blog/dropdowns-in-readmes/) [3](https://github.com/tchapi/markdown-cheatsheet/blob/master/README.md) [4](https://gist.github.com/joyrexus/16041f2426450e73f5df9391f7f7ae5f) [5](https://github.com/asyraffff/Hotwire-in-action)