Skip to content

Instantly share code, notes, and snippets.

@citrusui
Last active October 4, 2024 09:42
Show Gist options
  • Save citrusui/07978f14b11adada364ff901e27c7f61 to your computer and use it in GitHub Desktop.
Save citrusui/07978f14b11adada364ff901e27c7f61 to your computer and use it in GitHub Desktop.
"Dropdowns" in Markdown
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>
@TheTechRobo
Copy link

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!

@bgalvao
Copy link

bgalvao commented Nov 18, 2022

Thanks

@ricard-inho
Copy link

Can you add code inside the dropdown?

@jeremy0x
Copy link

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>

@ColstonBod-oy
Copy link

ColstonBod-oy commented Jan 29, 2023

@AlexandreFPGoncalves
Copy link

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

@jeremy0x
Copy link

jeremy0x commented Feb 3, 2023

@AlexandreFPGoncalves Unfortunately, I haven't.

@EtiTheSpirit
Copy link

EtiTheSpirit commented Feb 26, 2023

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

@jeremy0x
Copy link

Cool 👍 @EtiTheSpirit

@dadasmash
Copy link

Nice!

@Nerajno
Copy link

Nerajno commented Mar 14, 2023

😄

@AlexandreFPGoncalves
Copy link

That will do @EtiTheSpirit Thanks you! 😄

@cosmiccoincidence
Copy link

cosmiccoincidence commented Apr 25, 2023

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

@jeremy0x
Copy link

Nice. Thank you! @cosmiccoincidence

@Ali-Script
Copy link

can style it? like color

@gachikuku
Copy link

gachikuku commented May 15, 2024

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>

@kyhtwolffun
Copy link

kyhtwolffun commented Jul 3, 2024

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

@exxocism
Copy link

exxocism commented Oct 4, 2024

Thanks buddy

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment