I have a family tree which I'm working on, the code was gotten from [this codepen](https://codepen.io/Pestov/pen/BLpgm). Here's the markup

```
<div class="tree">
<ul>
    <li>
        <a href="#">Parent</a>
        <ul>
            <li>
                <a href="#">Child</a>
                <ul>
                    <li>
                        <a href="#">Grand Child</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Child</a>
                <ul>
                    <li><a href="#">Grand Child</a></li>
                    <li>
                        <a href="#">Grand Child</a>
                        <ul>
                            <li>
                                <a href="#">Great Grand Child</a>
                            </li>
                            <li>
                                <a href="#">Great Grand Child</a>
                            </li>
                            <li>
                                <a href="#">Great Grand Child</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Grand Child</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

```

How can I make it that only the `Parent` will be displayed, and other links will appear when the `Parent` link is clicked?

For example, if I click on the `Parent`, then the two `Child` will be displayed. If I then click on the 'Child' at the left, the `GrandCHild` is will displayed, but if I click on the `Child` at the right, the `Grandchild` of the left 'Child' will be hidden, and so on.