"Dropdowns" in Markdown

dropdown.md

How do I dropdown?

This is how you dropdown.

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

---

Want to ruin the surprise?

Well, you asked for it!

<details open>
<summary>Want to ruin the surprise?</summary>
<br>
Well, you asked for it!
</details>

@sintcraft https://gist.github.com/citrusui/07978f14b11adada364ff901e27c7f61?permalink_comment_id=4250662#gistcomment-4250662

Here is a nicely formatted hyperlink!

And it rolls well!

<details>

<summary>

[Here is a nicely formatted hyperlink!](https://www.youtube.com/watch?time_continue=1&v=eBGIQ7ZuuiU&feature=emb_title)

</summary>

And it rolls well!

</details>

@TheTechRobo how do I align that title with the toggle?

I'm afraid I can't think of anything besides using HTML straight:

<details>

<summary><a href="https://www.youtube.com/watch?time_continue=1&v=eBGIQ7ZuuiU&feature=emb_title">Here is a nicely formatted hyperlink!</a></summary>

And it rolls well!

</details>

Here is a nicely formatted hyperlink!

And it rolls well!

Thanks

Can you add code inside the dropdown?

Can you add code inside the dropdown?

There's code inside this dropdown...

This is how you add code in a dropdown:

console.log("Hello, world!");

    <details>
      <summary>There's code inside this dropdown...</summary>
      <br>
      
      This is how you add `code` in a dropdown:
      ```javascript
      console.log("Hello, world!");
      ```
    </details>

Table of Contents

1. About The Project
   • README Template
2. Decoupling Object Properties
   2a

   • 2a Examples
   • 2a Practical Uses

@jeremy0x have you perhaps discovered a way to make the dropdown a header?

@AlexandreFPGoncalves Unfortunately, I haven't.

HTML header tags can do this.

It's true!

<details>
<summary><h1>HTML header tags can do this.</h1></summary>
It's true!
</details>

h1 through h6 are valid, just like one # to six ###### is valid.

@AlexandreFPGoncalves

Cool 👍 @EtiTheSpirit

Nice!

😄

That will do @EtiTheSpirit Thanks you! 😄

I made some formatted dropdowns on the GitHub profile for a game development project. They're centered, have images, and one has hidden tables.

https://github.com/RE-SS3D

Nice. Thank you! @cosmiccoincidence

can style it? like color

why not

something like this

${{\color{Goldenrod}\Huge{\textsf{ Hi\ there\ }}}}$

Looks kinda neat imo.

why not 

<details>
<summary>

### [something like this](https://gist.github.com/citrusui/07978f14b11adada364ff901e27c7f61)
${{\color{Goldenrod}\Huge{\textsf{  Hi\ there\ \}}}}\$

</summary>

*Looks kinda neat imo.*

</details>

Alerts outside of dropdown works fine

Important

Important note

But this does not work

[!IMPORTANT]
Another important note

https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts

Thanks buddy

HTML header tags can do this.

It's true!