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