HTML Code To Implement Collapsible Sections-CodePudding

I have a popup.html file which presents the user with a slew of checkboxes. There are major sections that I would like to create expand/collapse sections. I am a neophyte web developer who knows enough to be dangerous. I have spent the better part of the past 10 hours trying to modify my code to address this issue. I have failed. I would love some help.

Here is my current code:

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    div.top {
      width: 250px;
    }
    div.indent {
      margin-left: 20px;
    }
  </style>
</head>
<body>
<p>Select Games / Expansions / Assets:</p>
<div class="top">
  <div>
    <input type="checkbox" id="g1" value="g1">
    <label for="g1">G1</label><br>
    <div class="indent">
      <input type="checkbox" id="g1-oc" value="g1-oc">
      <label for="g1-oc">G1 OC</label><br>
      <div class="indent">
        <input type="checkbox" id="g1-oc-x1" value="g1-oc-x1">
        <label for="g1-oc-x1">G1 OC X1</label><br>
        <div class="indent">
          <input type="checkbox" id="g1-oc-x1-a1" value="g1-oc-x1-a1">
          <label for="g1-oc-x1-a1">G1 OC X1 A1</label><br>
        </div>
        <div class="indent">
          <input type="checkbox" id="g1-oc-x1-a2" value="g1-oc-x1-a2">
          <label for="g1-oc-x1-a2">G1 OC X1 A2</label><br>
        </div>
      </div>
      <div class="indent">
        <input type="checkbox" id="g1-oc-x2" value="g1-oc-x2">
        <label for="g1-oc-x2">G1 OC X2</label><br>
        <div class="indent">
          <input type="checkbox" id="g1-oc-x2-a1" value="g1-oc-x2-a1">
          <label for="g1-oc-x2-a1">G1 OC X2 A1</label><br>
        </div>
        <div class="indent">
          <input type="checkbox" id="g1-oc-x2-a2" value="g1-oc-x2-a2">
          <label for="g1-oc-x2-a2">G1 OC X2 A2</label><br>
        </div>
      </div>
    </div>
    <div class="indent">
      <input type="checkbox" id="g1-uc" value="g1-uc">
      <label for="g1-uc">G1 UC</label><br>
      <div class="indent">
        <div>
          <input type="checkbox" id="g1-uc-x1" value="g1-uc-x1">
          <label for="g1-uc-x1">G1 UC X1</label><br>
          <div class="indent">
            <input type="checkbox" id="g1-uc-x1-a1" value="g1-uc-x1-a1">
            <label for="g1-uc-x1-a1">G1 UC X1 A1</label><br>
          </div>
          <div class="indent">
            <input type="checkbox" id="g1-uc-x1-a2" value="g1-us-c1-a2">
            <label for="g1-us-c1-a2">G1 UC X1 A2</label><br>
          </div>
        </div>
        <div>
          <input type="checkbox" id="g1-uc-x2" value="g1-uc-x2">
          <label for="g1-uc-x2">G1 UC X2</label><br>
          <div class="indent">
            <input type="checkbox" id="g1-uc-x2-a1" value="g1-uc-x2-a1">
            <label for="g1-uc-x2-a1">G1 UC X2 A1</label><br>
          </div>
          <div class="indent">
            <input type="checkbox" id="g1-uc-x2-a2" value="g1-uc-x2-a2">
            <label for="g1-uc-x2-a2">G1 UC X2 A2</label><br>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="popup.js"></script>
</body>
</html>

This code results in the following:

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

What I am trying to accomplish is have the code which will present the user collapsed sections as follows:

[ ] G1

When the user expands G1, they would see:

[ ] G1
    [ ] G1 OC
    [ ] G1 UC

If the user would expand G1 OC, they would see

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

If the user would expand G1 OC X1 they would see

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

And so on. Obviously, the functionality would have to expand and collapse the sections. For now, I don't need a fancy caret, arrow, etc. I could live with a simple " " and "-" in front of each checkbox.

Ideally, the code would be self-contained without referencing outside resources.

I would appreciate any help I could get. Hell, if someone could simply make one of the expansions/collapses to work, I am sure I could then modify the rest of the code to work in a similar fashion. Thanks in advance for any help provided.

CodePudding user response：

made a REPL (interactive code thingymajig) where you can try the solution I'm going to explain to you here (commented as well): https://replit.com/@heyitsmarcus/Collapsing-Entries-CSS

First, I did have to replace the "UC" structure with the "OC" in what you copied and pasted because the "UC" structuring was broken. It still says UC because I just replaced OC references with UC.

One thing I added to the HTML was the class expando-controller to each checkbox that is responsible for expanding elements. I chose expando-controller because I liked it but you can choose whatever you like (just change the HTML classes and the associated CSS file)