1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
| .accordion { list-style: none; margin: 0; padding: 0; }
.accordion li { border-top: var(--border); } .accordion li:first-child { border-top: none; }
.accordion .bd { padding: 0; margin: 0; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms; }
@media (prefers-reduced-motion) { .accordion .bd { transition: none; } }
.accordion .bd-no-animation { display: none; padding: var(--padding-small); }
.accordion .bd > div { height: auto; overflow: hidden; }
.accordion .bd > div > div { padding: var(--padding-small); }
.accordion label { display: block; cursor: pointer; user-select: none; padding: var(--padding-small); }
.accordion input[type=checkbox]:checked ~ .bd-no-animation { display: block; }
.accordion input[type=checkbox]:checked ~ .bd { grid-template-rows: 1fr; }
.accordion input[type=checkbox]:checked ~ label .expand-collapse { transform: rotate(90deg); }
|