I have been trying to get a prototype in place that lets the user expand or collapse items on a list. For example. The + indicates a drop down. When you start up it will show you just one item:
Farm +
Click on the + and it shows you:
Farm
Field A+
Click on the + and it shows you:
Farm
Field A
Bed A+
Bed B+
Click on the Bed A+ and it shows you:
Farm
Field A
Bed A
Row 1
Row 2
Bed B+
Click on the Bed B+ and it shows you:
Field A +
Bed A +
Row 1
Row 2
Bed B +
Row 3
Row 4
It works find if you have just one item that needs to expand. When you try to do nested list with multiple items for expansions it falls apart (for example, when you click on Field A + it will only show Bed A + and not Bed B + . It is HTML, Javascript based and a CSS component. I prefer to use Javascript. The code is in https://jsfiddle.net/jackmstein/ekfbcn71/7/
It's going to take some CSS and JS to help with interactivity.
Try something like the following (untested code ahead!)
<!-- Build a tree using nested lists. -->
<ul>
<li>
<label>Farm</label>
<span class="expander">+</span>
<ul>
...various list items...
</ul>
</li>
</ul>
/* Hide the child tree items by default */
li > ul { display: hidden; }
/* Show the immediate child tree if the parent has the [expanded] attribute */
li[expanded] > ul { display: block; }
// For every span.expander found, when clicked, toggle the [expanded] attribute
// on the parent <li>
document.querySelectorAll('span.expander').addEventListener('click', e => {
const element = e.target;
const parent = element.closest('li');
parent.toggleAttribute('expanded');
});