How to add Dropdown in Markdown ??

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

When we click, it will open the dropdown.

---

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>

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>

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>

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>

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>

😉

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>

4) Add Code into the dropdown 🚀

Same as the usual markdown.

The above image will get this;

5) Make a Collapsible Content

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

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

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>

The result will be like this;

---

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.

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.

The End

---

resources;

1 2 3 4 5

Comments

[Scott Rod]

So basically use HTML inside markdown.

[Amirul Asyraf]

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.

[Einstein]

Is it possible to add links to the dropdown, i cant seem to add them, im guessing its not possible?

Edit: was able to get it to work now, just did a silly mistake.