Last active
July 13, 2017 06:22
-
-
Save jmakeig/33faf575441a708e1120ae20d1afd0e3 to your computer and use it in GitHub Desktop.
Minimal HTML toggle group
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Toggle group</title> | |
| <style type="text/css"> | |
| .toggleable:before { | |
| width: 0.75rem; | |
| /* The two arrows have different widths */ | |
| display: inline-block; | |
| content: '▾'; | |
| } | |
| .toggle-group { | |
| /* Generally the same as .toggleable:before width */ | |
| margin-left: 0.75rem; | |
| } | |
| .toggleable.toggle-collapsed:before { | |
| content: '▸'; | |
| } | |
| .toggle-collapsed > .toggle-group { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="toggleable"> | |
| <span class="label">Stuff</span> | |
| <div class="toggle-group"> | |
| <ol> | |
| <li>A</li> | |
| <li>B</li> | |
| <li>C</li> | |
| </ol> | |
| <div class="toggleable"> | |
| <span class="label">Nested</span> | |
| <div class="toggle-group"> | |
| <ol> | |
| <li>i</li> | |
| <li>ii</li> | |
| <li>iii</li> | |
| </ol> | |
| </div> | |
| </div> | |
| <div class="toggleable"> | |
| <span class="label">Another nest</span> | |
| <div class="toggle-group"> | |
| <ol> | |
| <li>iv</li> | |
| <li>v</li> | |
| <li>vi</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="application/javascript">//<-- | |
| 'use strict'; | |
| document.body.addEventListener('click', evt => { | |
| if (evt.target && evt.target.matches('.toggleable')) { | |
| evt.target.classList.toggle('toggle-collapsed'); | |
| } | |
| }); | |
| //--> | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
.toggleablefrom the toggle affordance (i.e. ▸) (seeElement.prototype.closest)This is going to be difficult to do cleanly (i.e. without introducing more mark-up) because
:beforepseudo-elements are not part of the DOM and thus can have events attached or even matched in a handler on the “parent”.toggle-noneis a terrible name