How do you keep the content inside of a dropdown box invisible until you click on the box? – Html

Simply put, I want to create a sidebar on my website that includes a list of items alphabetized from A to Z. I want the items to put within dropdox boxes, such that when you click on A, all of the items that start with A will appear below it.

I’ve gotten the dropdown box working just fine. The problem is that by default all list items are visible. Here’s what I have so far, and this is what I want it to look like by default.

Here’s what I’ve tried.

First of all, the HTML code for this section looks like this.

<li><span>A</span>
</li>
<li><span>B</span>
    <ul>
        <li class="indent">Baldur's Gate</li>
        <li class="indent">Baldur's Gate II: Shadows of Amn</li>
        <li class="indent">Baldur's Gate II: Shadows of Amn (Solo)</li>
        <li class="indent">Baldur’s Gate II: Throne of Bhaal</li>
        <li class="indent">Baldur's Gate III (Livestream)</li>
        <li class="indent">Baldur's Gate: Enhanced Edition</li>
        <li class="indent">Baldur's Gate: Enhanced Edition (Livestream)</li>
        <li class="indent">BioShock Infinite (Livestream)</li>
        <li class="indent">Blood Bowl (Dark Elves)</li>
        <li class="indent">Blood Bowl (Nurgle)</li>
        <li class="indent">Blood Bowl (Skaven)</li>
        <li class="indent">Blood Bowl (Undead)</li>
        <li class="indent">BloodRayne</li>
    </ul>
<li><span>C</span>
    <ul class="indent">
        <li class="indent">Cities Skylines (Livestream)</li>
    </ul>
</li>

Basically, I have a list of items, with each letter of the alphabet as a span. Now I know what you’re thinking: what in the world is class="indent" and why is it in every li? Well, that’s the result of hours of messing about with the code. It’s called indent because I wanted to have every item indented, of course, but I also thought I could add on display: hidden to that class and hide each item by default. That didn’t work. In hindsight I probably need to just add a div wrapped around all of the li and use the indent property that way.

I using class-indent on the ul tag instead. Before we go on, I should note that the code for indent looks like this.

.indent {
    display: none;
    text-indent: 15px;
}

So hid the items, but basically stopped the script that made them appear from working. I suppose I should include that as well.

var allSpan = document.getElementsByTagName('span');

for(var x = 0; x < allSpan.length; x++)
{
    allSpan[x].onclick=function()
    {
        if(this.parentNode)
        {
            var childList = this.parentNode.getElementsByTagName('li');
            for(var y = 0; y< childList.length;y++)
            {
                var currentState = childList[y].style.display;
                if(currentState=="none")
                {
                    childList[y].style.display="block";
                }
                else
                {
                    childList[y].style.display="none";
                }
            }
        }
    }
}

Anyway, I then tried creating a div around the li tags and that did the same thing as above. The items are hidden, but the script no longer works.

I’m pretty much out of ideas. I’d greatly appreciate some help on this one.