HTML-код для реализации складных разделов ⇐ CSS

[Anonymous]

У меня есть файл popup.html, который предоставляет пользователю множество флажков. Есть основные разделы, которые я хотел бы создать, чтобы развернуть/свернуть. Я веб-разработчик-новичок, который знает достаточно, чтобы быть опасным. Я потратил большую часть последних 10 часов, пытаясь изменить свой код для решения этой проблемы. Я потерпел неудачу. Буду рад помощи.
Вот мой текущий код:

Код: Выделить всё

div.top {
width: 250px;
}
div.indent {
margin-left: 20px;
}



Select Games / Expansions / Assets:



G1



G1 OC



G1 OC X1



G1 OC X1 A1


G1 OC X1 A2




G1 OC X2



G1 OC X2 A1


G1 OC X2 A2





G1 UC




G1 UC X1



G1 UC X1 A1


G1 UC X1 A2




G1 UC X2



G1 UC X2 A1


G1 UC X2 A2

Этот код приводит к следующему:

Код: Выделить всё

Select Games / Expansions / Assets:

[ ] G1
[ ] G1 OC
[ ] G1 OC X1
[ ] G1 OC X1 A1
[ ] G1 OC X1 A2
[ ] G1 OC X2
[ ] G1 OC X2 A1
[ ] G1 OC X2 A2
[ ] G1 UC
[ ] G1 UC X1
[ ] G1 UC X1 A1
[ ] G1 UC X1 A2
[ ] G1 UC X2
[ ] G1 UC X2 A1
[ ] G1 UC X2 A2

Я пытаюсь создать код, который будет представлять свернутые разделы пользователя следующим образом:

Код: Выделить всё

[ ] G1

Когда пользователь развернет G1, он увидит:

Код: Выделить всё

[ ] G1
[ ] G1 OC
[ ] G1 UC

Если пользователь развернет G1 OC, он увидит

Код: Выделить всё

[ ] G1
[ ] G1 OC
[ ] G1 OC X1
[ ] G1 OC X2

Если пользователь развернет G1 OC X1, он увидит

Код: Выделить всё

[ ] G1
[ ] G1 OC
[ ] G1 OC X1
[ ] G1 OC X1 A1
[ ] G1 OC X1 A2

И так далее. Очевидно, что функционал должен будет расширять и сворачивать разделы. На данный момент мне не нужны причудливые курсоры, стрелки и т. д. Я мог бы обойтись простыми «+» и «-» перед каждым флажком.
В идеале, код будет самодостаточным и не будет ссылаться на внешние ресурсы.
Я буду признателен за любую помощь, которую смогу получить. Черт, если бы кто-то мог просто заставить работать одно из расширений/свертываний, я уверен, что затем я мог бы изменить остальную часть кода, чтобы она работала аналогичным образом. Заранее благодарим за любую оказанную помощь.

Подробнее здесь: https://stackoverflow.com/questions/694 ... e-sections