Question

My vertical nav works except for that when I press on the sibling drop down the previous opened drop down does not collapse. I was wondering if you could help me with this.

Here is my javascript code and if you want to look at it in full here is the jsfiddle link: http://jsfiddle.net/CLNBn/2/

$('.vertical-nav ul li:has("div")').find('div').hide();

$('.vertical-nav li:has("div")').find('span:first').click(function() {
    $(this).parent('li').find('span:first').toggleClass("closed opened");
    if ($(this).parent('li').find('span:first').attr('class') == 'closed') {
        $(this).parent('li').find('span:first').text('+');
    } else {
        $(this).parent('li').find('span:first').text('-');
    }
    $(this).parent('li').find('div:first').slideToggle();
});

Answer 1

Since you already gave your elements reasonable classes, this task is quite easy. What you want is to find all span elements with class opened that are children of the siblings of the current li element, and trigger their click event handler.

This can be done with:

$(this).closest('li').siblings().children('span.opened').click();

DEMO

I also took the liberty to simplify your code to:

$('.vertical-nav li:has("div")').find('span:first').click(function() {
    var $this = $(this);
    $this.toggleClass("closed opened");
    if ($this.hasClass('closed')) {
        $this.text('+');
    } else {
        $this.text('-');
        $this.closest('li').siblings().children('span.opened').click();
    }
    $this.closest('li').find('div').first().slideToggle();
});​

As I said in my comment, this already refers to the span element, there is no need to traverse up the DOM tree and search for it again.