Issue targeting div after creating it with .wrap()

Question

I'm having a strange issue checking whether a div I just created with .wrap() is visible or not. I'm wrapping some divs and using the ID's on them as targets. I've tested to make sure the click is actually registering with an alert(), and it is.

Here is the code.

//Leftbar jQuery
$('ul.leftnav').wrap('<div id="leftnav-wrap" class="five columns alpha" />');
$('#leftnav-wrap').prepend('<div class="arrow" />');
$('#content').has('#leftnav-wrap').find('#page').wrap('<div class="eleven columns omega" />');

//Mobile Leftbar
$('h4.mobile.toggle').click(function(){
    if ($('#leftnav-wrap').is(':hidden')){
        $(this).addClass('active');
        $('#leftnav-wrap').addClass('active');
    }
    else{
        $(this).removeClass('active');
        $('#leftnav-wrap').removeClass('active');
    }
});

Is there something inherently wrong with what I've coded? It doesn't toggle any of the active classes it is suppose to, and I have another site that is working fine, only it's not targeting an ID just created by .wrap().

JSfiddle here: jsfiddle.net/ZD7hz. Not toggling any classes

Actually what do you expect to do, there is nothing wrong in the code , the logic is wrong.Please tell what you are trying to do. — SarathSprakash, Sep 24 '13 at 16:55
I actually just figured out what the issue is. Posting answer below. — Sean, Sep 24 '13 at 17:06

score 0 · Accepted Answer · answered Sep 24 '13 at 17:14

So, here was the issue. It couldn't find a hidden div to add a class to, and it also couldn't find a visible div to remove the class from. So clicking did nothing.

I had to preemptively hide the leftnav with CSS, and add a class for the .active state so it displays it again. Then, the toggling works fine...

Whoops!

Fixed jsFiddle is here: http://jsfiddle.net/ZD7hz/1/

Issue targeting div after creating it with .wrap()

1 Answers1