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);
}

li{
    
    background-color:yellow;
}

ul {
    
    background-color:red;
    
}

JavaScript

// insert checkboxes and wrap expandables in div
$('li.expandable').wrap('<div class="expandable-container">').css({
    display: 'inline'
}).before($('<input type="checkbox" />'))

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

// li click
$('li.expandable').on('click', function (e) {
    
    if(e.target.nodeName !== "UL")
    {
        var $li = $(this);
        $li.children('ul').slideToggle('fast');
        
        var container = $li.parent();
        container.toggleClass('active')
        
        var cbx = $li.siblings();
        cbx.prop('checked', !cbx.prop("checked"))
        
        
        return false;
    
}
});

// checkbox checked
$('li.expandable').siblings().on('change', function (e) {
    var cbx = $(this)
    
    var container = cbx.parent();
    container.toggleClass('active')
    
    var $li = cbx.next('li')
    $li.children('ul').slideToggle('fast');
    
    window.checkbox_checked = true;
    return false;
});
// set focus to first checkbox
$('li.expandable').first().siblings().focus()