"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>

Wanna see something awesome?

You sure?

You 100% definatley sure?

Okay.. if you insist

Just dont say i didnt warn you

CUS I DID!

U ready?

3...

2...

1...

* epic drumroll here *

Here you go.

Is there a way to have markdowns in line with normal bullet poins?

Markdown

• Markdown content

• Bullet point

can we dropdown tables? i tried but it doesnt seem to work

@moizmoizmoiz

If the markdown is showing as plain text, please keep this in mind:

Does not work

[hi](https://hello.ca)

Does work

hi

<details><summary>Does not work</summary>
[hi](https://hello.ca)
</details>


<details><summary>Does work</summary>

[hi](https://hello.ca)

</details>

Is there any way to make the dropdown a header? Like this...

great idea!

Img?

Imgs?


@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