Broken jQuery Tab Switcher

Question

Liver Demo: https://tornhq.com/WorkingOn/InteractiveMap/Replaced-With-Divs.html

jQuery Tab Switch Code ignore lines 2-6

$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({right:'-300px'}, {queue: false, duration: 500});
    }, function () {
        $(this).parent().animate({right:'-0px'}, {queue: false, duration: 500});
    });
    $('#tab-content div').hide();
    $('#tab-content div:last').show();

    $('#Info-Side-Tabs li').click(function() {
        $('#Info-Side-Tabs li').removeClass("current");
        $(this).find('li').addClass("current");
        $('#tab-content div').hide();

        var indexer = $(this).index(); //gets the current index of (this) which is #nav li
        $('#tab-content div:eq(' + indexer + ')').fadeIn(); //uses whatever index the link has to open the corresponding box 
    });
});

I am having trouble implementing a jQuery tab switch into my website:

"$(this).find('li').addClass("current");" 

is used to find 'a', however I need it to change the class of the li and not the a.

The only tab switch content which is showing is part of the second one from the top and not all of it. I am just very confused at this moment in time and could really do with some help.

---

Update:

    $('#Info-Side-Tabs li').removeClass("current");

Seems to be removing the class upon clicking, however

    $(this).find('li').addClass("current");

Does not seem to add the class to the new clicked tab.

    $("#tab-3").toggle(function () {
        // $('#Map-Selection-Info').animate({right:'-976px'}, {queue: false, duration: 500});
        $('#Map-Selection-Info').animate({marginLeft: '976px'}, 1000).addClass('current');
    }, function () {
        $('#Map-Selection-Info').animate({right:'670px'}, {queue: false, duration: 500});
    });

I am trying to apply the above to the 'Hide This' tab, so when you click on it, it move further right out of view and recliick to show.

Full Script So Far:
$(function () {
    $("#tab-3").toggle(function () {
        // $('#Map-Selection-Info').animate({right:'-976px'}, {queue: false, duration: 500});
        $('#Map-Selection-Info').animate({marginLeft: '976px'}, 1000).addClass('current');
    }, function () {
        $('#Map-Selection-Info').animate({right:'670px'}, {queue: false, duration: 500});
    });
    $('#tab-content div').hide();
    $('#tab-content div:last').show();

    $('#Info-Side-Tabs li').click(function() {
        $('#Info-Side-Tabs li').removeClass("current");
        $(this).find('li').addClass("current");
        $('#tab-content div').hide();
        var href = $(this).find('a').attr("href");
        $('#tab-content div' + href).fadeIn().find('*').show();
    });
});

Answer 1

Remove .find('li').

You don't need that as the click event is fired on the li element. So $(this) IS the li element.

Then you do:

$('#Info-Side-Tabs li').click(function() {
    $('#Info-Side-Tabs li').removeClass("current");
    $(this).addClass("current");
    $('#tab-content div').hide();
    var href = $(this).find('a').attr("href");
    $('#tab-content div' + href).fadeIn()
});

That works for me, other than there being no "#tab2" and "#tab3" content divs. The index code wouldnt work because the index is numerical and you are trying to match a content div, it won't match because the divs have string id's

Edit

You can show all child elements using the following:

$('#tab-content div' + href).fadeIn().find('*').show();

Edit 2

The :last selector is finding the deepest div element inside #tab-content and showing it, which is: <div id="Social-Fun" style="display: none;">

That's why you don't see anything.

You could add a class to each div, something like class='country' and then you could do:

$('#tab-content div.country').last().show()