cssOMS/tests/app/foldable.htm
Dennis Eichhorn c8aff8c109 perm change
2023-03-25 22:32:11 +00:00

62 lines
1.5 KiB
HTML
Executable File

<html>
<head>
<style>
ul.foldable {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.foldable input[type=checkbox] {
display: none;
}
ul.foldable .caret {
cursor: pointer;
user-select: none;
}
ul.foldable .caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
ul.foldable .nested {
display: none;
}
ul.foldable input[type=checkbox]:checked ~ .nested {
display: block;
}
ul.foldable input[type=checkbox]:checked ~ .caret::before {
transform: rotate(90deg);
}
ul.foldable ul {
list-style-type: none;
}
</style>
</head>
<body>
<ul class="foldable">
<li><input id="l1-1" type="checkbox" checked>
Beverages
<ul class="nested">
<li>Water</li>
<li>Coffee</li>
<li><input id="l2-1" type="checkbox">
<label class="caret" for="l2-1">Tea</label>
<ul class="nested">
<li>Black Tea</li>
<li>White Tea</li>
<li><input id="l3-1" type="checkbox">
<label class="caret" for="l3-1">Green Tea</label>
<ul class="nested">
<li>Sencha</li>
<li>Gyokuro</li>
<li>Matcha</li>
<li>Pi Lo Chun</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>