Skip to content

Instantly share code, notes, and snippets.

@citrusui
Last active April 21, 2024 18:44
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>
@Einstein-here
Copy link

Einstein-here commented Jun 14, 2022

As I've said a bunch of times now:

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


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

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

</details>

Wasn't talking about the hyperlinks when opening the dropdown, but in the sections where you add the <summary>Link test</summary>, it isn't possible to add links with markdown, but if you use the HTML syntax to add links, those will work.

You may read my statement again for clarification, but no worries, I had found a solution, thanks for the response!

@TheTechRobo
Copy link

Oh, sorry. Misread your post.

This works but the formatting is weird:

does this work?

hi

<details><summary>

[does this work?](https://hello.ca)

</summary>

hi

</details>

@vwallajabad
Copy link

vwallajabad commented Jun 22, 2022

@TheTechRobo I don't think u can mix HTML and MD together in the same line. You need to put a line gap for it to work. I tried using an a tag <a href=""></a>

I ended up with this and it works fine

Hi

hi

<details><summary><a href="https://Example.com">Hi</a></summary>

hi

</details>

@TheTechRobo
Copy link

...Yeah, I never said you could mix HTML and Markdown.

@joost00719
Copy link

@TheTechRobo I don't think u can mix HTML and MD together in the same line. You need to put a line gap for it to work. I tried using an a tag <a href=""></a>

I ended up with this and it works fine

Hi

<details><summary><a href="https://Example.com">Hi</a></summary>

hi

</details>

You can't somehow open the url, but if you hold control and click, you can!

@JumperBot
Copy link

I can't believe you'd waste such valuable time!

@theLadEli
Copy link

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.

@D4rk-S0ul
Copy link

D4rk-S0ul commented Jul 26, 2022

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

Markdown
  • Markdown content
  • Bullet point

@moizmoizmoiz
Copy link

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

@TheTechRobo
Copy link

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

@jeremy0x
Copy link

jeremy0x commented Aug 1, 2022

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

image

Copy link

ghost commented Aug 28, 2022

great idea!

@sintcraft
Copy link

Img?

Imgs? ![hi](http://blog.scielo.org/es/wp-content/uploads/sites/3/2022/02/markus-spiske-70Rir5vB96U-unsplash.jpg)

@bgalvao
Copy link

bgalvao commented Nov 18, 2022

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?

@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

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