Untitled

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/tiscript">
        var group = $$(.group);
        var social = $$(.social);
        group[0] << event click
        {
            social[0].style#visibility = social[0].isVisible ? "none" : "visible";
        }


    </script>
    <title>Dir Tree</title>
</head>
<body>
    <div class="tree">
        <ul>
            <li class="group">Catalog 1</li>
            <ul class="social">
                <li>Social 1</li>
                <li>Social 2</li>
                <li>Social 3</li>
                <li>Social 4</li>
            </ul>
        </ul>
        <ul>
            <li class="group">Catalog 2</li>
            <ul class="social">
                <li>Social 1</li>
                <li>Social 2</li>
                <li>Social 3</li>
            </ul>
        </ul>
    </div>
</body>
</html>