Key nav nested list

HTML

<ul>
    <li class="expandable closed">Game
        <ul>
            <li>- Action</li>
            <li>- RPG</li>
        </ul>
    </li>
    <li class="expandable closed">BBS
        <ul>
            <li class="expandable closed">- Group 1
                <ul>
                    <li>-- Board 1</li>
                    <li>-- Board 2</li>
                </ul>
            </li>
            <li class="expandable closed">- Group 2
                <ul>
                    <li>-- Board 1</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

.expandable-container.active {
    background-color: rgba(200, 200, 200, 0.1);
}

JavaScript

// insert checkboxes and wrap expandables in div
$('li.expandable').prepend('<input type="checkbox" />');

// fold all those with class closed
$('li.expandable.closed').children('ul').hide()

// li click
$('li.expandable').on('click', function (e) {
    e.stopPropagation();
    var $li = $(this);
    $li.children('ul').slideToggle('fast');

    var container = $li.parent();
    container.toggleClass('active')

    if (e.target.nodeName !== 'INPUT') {
        var cbx = $li.children('input');
        cbx.prop('checked', !cbx.prop("checked"))
    }
});

// set focus to first checkbox
$('li.expandable').first().siblings().focus()