mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-01-10 18:58:40 +00:00
62 lines
1.5 KiB
HTML
Executable File
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> |