Cannot target DIV to .show() on toggleClass

Question

I am trying to build a menu of items that expand when clicked but for some reason my .show() doesn't seem to be affect the DIV that I am trying to target - they just remain hidden. I set up a JSFiddle:

$(document).ready(function () {

    $('.visa-class').click(function () {
        $('.visa-class').toggleClass('open');
    });

    if ($('li>.visa-info').hasClass ('open')) {
            $('.visa-info').show();
        } else {
            $('.visa-info').hide();
    }
});

http://jsfiddle.net/Bws3t/12/

And after I can get them to all act together, I cannot figure out how to get them to act separately other than individually naming each of the sections - is this necessary?

Answer 1

You need to toggle the element on click itself:

$('.visa-class').click(function () {
    $(this).toggleClass('open');
    $(this).find('.visa-info').toggle($(this).hasClass('open'));
});

Working Demo