Question

I need a little help to get my side nav working properly.

Link to my working version: http://recx.vaughndtaylor.com/

Notice that the nav expands/contracts properly, but I want to have the +/- acting independent of the link. For example, I want the menu to expand when the + is clicked, but I want the link to go to a page.

I’m using Google’s side nav as an example: https://developers.google.com/chart/

The toggle in this example can be clicked, but you can also click the link.

This is what I have:

 $('li.openable').click(function(){
        if ($(this).children('div.accordion').is(':hidden')) {
            $(this).siblings().removeClass('active').children('div.accordion').slideUp();
            $(this).toggleClass('active').children('div.accordion').slideDown('fast');
        } else {
            $(this).removeClass('active').children('div.accordion').slideUp('fast');
        }
        return false;
    });

I think I need something more like this:

$('li.openable > span.icon').click(function(){
    if ($(this).children('div.accordion').is(':hidden')) {
        $(this).siblings().removeClass('active').children('div.accordion').slideUp();
        $(this).toggleClass('active').children('div.accordion').slideDown('fast');
    } else {
        $(this).removeClass('active').children('div.accordion').slideUp('fast');
    }
    return false;
});

I’m having difficulties figuring out the relationship between objects here. In my second example, $(this) is no longer the correct object (this is now span.icon). Do I set this as a variable? Do I use relationships (eg. siblings(), parents()?)

Any help on this issue would be greatly appreciated.

Thanks!

Update: This is how I resolved the issue using the suggestion below:

$('li.openable > span.icon').click(function(){
        var expander = $(this).parents('li');
        if (expander.children('div.accordion').is(':hidden')) { 
            expander.siblings().removeClass('active').children('div.accordion').slideUp(); 
            expander.toggleClass('active').children('div.accordion').slideDown('fast'); 
        } else {
            expander.removeClass('active').children('div.accordion').slideUp('fast');
        }
        return false;
    });

Answer 1

You said the right thing. Make a variable based on the parent() of the span element and go from there:

$('li.openable > span.icon').click(function(){
    var thingToExpandOrContract = $(this).parents('li');

...

Go from there using the variable instead of “this”.