| <style> | |
| details { | |
| border: solid 0.5em; | |
| } | |
| summary { | |
| border: solid 0.5em; | |
| } | |
| summary.level1 { | |
| border-color: #99c; | |
| } | |
| details.level1 { | |
| border-color: #559; | |
| } | |
| summary.level2 { | |
| border-color: #c99; | |
| } | |
| details.level2 { | |
| border-color: #955; | |
| } | |
| </style> | |
| <body> | |
| <details class="level1" open> | |
| <summary class="level1"> | |
| summary | |
| <details class="level2" open> | |
| <summary class="level2"> | |
| nested summary (summary-deails-summary) | |
| </summary> | |
| nested details (summary-deails) | |
| </details> | |
| </summary> | |
| details | |
| </details> | |
| </body> |