Last active
December 14, 2015 15:58
-
-
Save FlyCodeRepeat/5111648 to your computer and use it in GitHub Desktop.
Using only radio inputs, CSS3's general sibling selector, and CSS3 transitions, you can make an animated accordion. No JS required!
This file contains 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
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <title>Accordions?</title> | |
| <style> | |
| ul.accordion{ | |
| height: 100%; | |
| list-style: none; | |
| padding: 0; | |
| } | |
| ul.accordion li{ | |
| padding: 5px; | |
| } | |
| /* Don't show the radio button. Use it's label for interactions. */ | |
| ul.accordion input{ | |
| display: none; | |
| } | |
| /* the closed state of the item title */ | |
| ul.accordion input ~ label{ | |
| background: #900; | |
| color: #fff; | |
| display: block; | |
| border-radius: 5px; | |
| padding: 5px 5px 5px 40px; | |
| } | |
| /* the open state of the item title */ | |
| ul.accordion input:checked ~ label{ | |
| background: #090; | |
| } | |
| /* this is where the magic begins */ | |
| ul.accordion article{ | |
| transition: height .3s; | |
| -webkit-transition: height .3s; | |
| -moz-transition: height .3s; | |
| -o-transition: height .3s; | |
| overflow: hidden; | |
| } | |
| /* closed state of the content */ | |
| ul.accordion input ~ article{ | |
| height: 0; | |
| } | |
| /* opened state of the content */ | |
| ul.accordion input:checked ~ article{ | |
| height: 300px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul class="accordion"> | |
| <li> | |
| <input id="rd1" type="radio" name="accordion1" checked="checked"/><label for="rd1">Item 1</label> | |
| <article> | |
| <p>This is the text for Item 1</p> | |
| </article> | |
| </li> | |
| <li> | |
| <input id="rd2" type="radio" name="accordion1"/><label for="rd2">Item 2</label> | |
| <article> | |
| <p>This is the text for Item 2</p> | |
| </article> | |
| </li> | |
| <li> | |
| <input id="rd3" type="radio" name="accordion1"/><label for="rd3">Item 3</label> | |
| <article> | |
| <p>This is the text for Item 3</p> | |
| </article> | |
| </li> | |
| <li> | |
| <input id="rd4" type="radio" name="accordion1"/><label for="rd4">Item 4</label> | |
| <article> | |
| <p>This is the text for Item 4</p> | |
| </article> | |
| </li> | |
| <li> | |
| <input id="rd5" type="radio" name="accordion1"/><label for="rd5">Item 5</label> | |
| <article> | |
| <p>This is the text for Item 5</p> | |
| </article> | |
| </li> | |
| </ul> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment