| details { | |
| display: block; | |
| overflow: hidden; | |
| height: 1em; | |
| border-left: 10px; | |
| padding-left: 15px; | |
| } | |
| details > summary { | |
| position: relative; | |
| left: -11px; | |
| text-align: left; | |
| display: block; | |
| font-weight: bold; | |
| } | |
| details > summary:before { | |
| position: relative; | |
| left: -1px; | |
| content: url(horizontal-triangle.png); | |
| } | |
| details[open] { | |
| text-align: left; | |
| height: auto; | |
| } | |
| details[open] > summary:before { | |
| content: url(vertical-triangle.png); | |
| } |