Skip to content

Instantly share code, notes, and snippets.

@jeffmcneill
Last active August 24, 2017 14:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeffmcneill/25119835e203677f76b1fbb05040920d to your computer and use it in GitHub Desktop.
Save jeffmcneill/25119835e203677f76b1fbb05040920d to your computer and use it in GitHub Desktop.
- [ ] Mercury
- [x] Venus
- [x] Earth
- [x] Moon
- [x] Mars
- [ ] Deimos
- [ ] Phobos
<details>
<summary>Toggle content display</summary>
- [ ] Mercury
- [x] Venus
- [x] Earth
- [x] Moon
- [x] Mars
- [ ] Deimos
- [ ] Phobos
</details>
@jeffmcneill
Copy link
Author

jeffmcneill commented Aug 24, 2017

  • Mercury
  • Venus
  • Earth
    • Moon
  • Mars
    • Deimos
    • Phobos

@jeffmcneill
Copy link
Author

jeffmcneill commented Aug 24, 2017

Toggle display
  • Mercury
  • Venus
  • Earth
    • Moon
  • Mars
    • Deimos
    • Phobos

Second

Toggle display
  • Mercury
  • Venus
  • Earth
    • Moon
  • Mars
    • Deimos
    • Phobos

@jeffmcneill
Copy link
Author

jeffmcneill commented Aug 24, 2017

Github-flavored markdown (GFM) does not support footnotes.1

Footnotes

  1. Footnote text.

@jeffmcneill
Copy link
Author

jeffmcneill commented Aug 24, 2017

Awesome Section

Nothing generated

Awesome Section

Looks like the adding of names via pound doesn't work.

Fenced code blocks, does the tilde work? Fenced code blocks, does the tilde work? Fenced code blocks, does the tilde work?
Fenced code blocks, does the tilde work? Fenced code blocks, does the tilde work?
Fenced code blocks, does the tilde work?

link back to Awesome Section
And again...

Another Awesome Section

and linking to Another Awesome Section

Note that automatic anchor generation does not happen in gists though it does in github markdown files in repositories.

@jeffmcneill
Copy link
Author

How to get the same hide/show function with CSS only:

<input id="display-toggle" type=checkbox>
<label id="display-button" for="display-toggle"><span>Display Content</span></label>
<label id="hide-button" for="display-toggle"><span>Hide Content</span></label>
<div id="hidden-content">
  <br />Hidden Content</div>
label {
  background-color: #ccc;
  color: brown;
  padding: 5px;
  text-decoration: none;
  font-size: 16px;
  border: 2px solid brown;
  border-radius: 5px;
  display: block;
  width: 150px;
  text-align: center;
}

input,
label#hide-button,
#hidden-content {
  display: none;
}

input#display-toggle:checked ~ label#display-button {
  display: none;
}

input#display-toggle:checked ~ label#hide-button {
  display: block;
  background-color: #aaa;
  color: #333
}

input#display-toggle:checked ~ #hidden-content {
  display: block;
}

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