[Fixed] Showing or hiding nav subitems depending on whether the parent item is selected

Issue

I’m dynamically creating a menu in Angular (although this issue is I think agnostic to the framework producing the code) and I have an UL with LIs within, each containing a link, like this:

<ul>
    <li>
        <a href="">The Parent Link</a>
    </li>
</ul>

The code iterates over the LIs producing a link for each item. Some of the items have children that are rendered like this:

<ul>
    <li>
        <a href="whatever">The Parent Link</a>
        <ul>
            <li>
                <a href="whatever">The Child link</a>
            </li>
        </ul>
    </li>
</ul>

Is there a way for this to by default hide the children (I’ve successfully done this with display:none – I know, I deserve a medal) but then for them to appear when the parent LI (NOTE – not the parent anchor link) has a class e.g. Active?

So, basically this:

<ul>
    <li class="active"> *<-- I've clicked on this so it's got the class 'active'*
        <a href="">The Parent Link</a>
        <ul>
            <li>
                <a href="The Child link</a> *<--  I am now visible* 
            </li>
        </ul>
    </li>
</ul>

Solution

Yes its possible with css:

li ul {
    display: none;
}

li.active ul {
    display: block;
}