HTML Code To Implement Collapsible Sections
Question
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.
2 answers
solution1
1 ACCPTED 2021-10-04 02:47:01
@any2cards It sounds like you're looking for the <details> element . Supported by all major browsers and requires no extra code.
<details>
<summary>This content is visible at all times</summary>
<p>This content is only visible when expanded</p>
</details>
solution2
0 2021-10-04 02:42:23
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) The reason why I added this class was so that every checkbox had a common functionality that I can latch onto with JavaScript. Classes are powerful and, if utilized correctly, are one of the finest bits of HTML, CSS, and JavaScript.
Oh, and I swapped out the attribute with a link to a CSS stylesheet. Try to avoid using those as you'll get some weird funkiness if you start using a blend of stylesheets and internal tags. Best to avoid them if you can.
So, originally, I did this in JavaScript and posted a working but rather complicated answer...and deleted it. If you want to see that version, it is here: https://replit.com/@heyitsmarcus/Collapsing-Entries
You can add this functionality in just a few lines of extra CSS:
/* If an .expando-controller is checked, show its sibling .indent elements */
.expando-controller:checked ~ div.indent {
display: block;
}
/* If an .expando-controller is not checked, hide its sibling .indent elements */
.expando-controller:not(:checked) ~ div.indent {
display: none;
}
So long as you keep the same structure that you have, you can expand this ad infinitum.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.