Last active
August 24, 2017 14:23
-
-
Save jeffmcneill/25119835e203677f76b1fbb05040920d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- [ ] 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> |
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
Awesome Section
Nothing generated
Awesome Section
Looks like the adding of names via pound doesn't 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.