JQuery: Toggling Styles Upon Toggling Slide

My code sets upon click but does not unset upon clicking again. I’ve tested in the css and .is(‘:visible’) always comes out true, however I’ve been browsing and have tried multiple ways and cannot get it working.

$('.TopNavDropDown').click(function(){
	$('#TopNavList').slideToggle('slow');
	if($('#TopNavList').is(':visible')){
		$('.TopNavDropDownWrap').css('background-color','#f7dd71');
		$('.TopNavDropDownWrap a').css('color','#b11016');
	} else {
		$('.TopNavDropDownWrap').css('background', 'url("http://egentec.com/raffles/images/navi-bg.png")');
		$('.TopNavDropDownWrap a').css('color','#f7dd71');
	}
});

Live View: http://rafflebananza.com/admin/test.html

Please not you must make your window width 834px or lower.

Best Regards,
Tim

It seems that the attempt to execute the following code just before the above, is preventing further execution of your code.


var ab = $('body').Width();

The width method is case-sensitive, and should be in lowercase instead.

Okay, I’ve sorted out that error, however this css styling toggle will not work;

	$('.TopNavDropDown').click(function(){
		$('#TopNavList').slideToggle('slow');
		if($('#TopNavList').is(':visible')){
			$('.TopNavDropDownWrap').css('background-url', 'none');
			$('.TopNavDropDownWrap').css('background-color','#f7dd71');
			$('.TopNavDropDownWrap a').css('color','#b11016');
		} else {
			$('.TopNavDropDownWrap').css('background-color','none');
			$('.TopNavDropDownWrap').css('background-image', 'url("http://egentec.com/raffles/images/navi-bg.png")');
			$('.TopNavDropDownWrap a').css('color','#f7dd71');
		}
	});

Another error that seems to be causing problems is as follows:
Uncaught ReferenceError: ab is not defined


]$(window).resize(function() {
    var iw = $('body').width();
    if (ab > 979) {

I don’t think that you should have removed the offending line earlier on. Correct the problem by putting it back and using the correct case for the width method.

Modified, I forgot to name the variable ‘ab’ instead it was ‘iw’ . I also just run it by a validator and checked it to clear things up but still my switch styles will not work.

When you do a slow slide toggle, the element is still visible in the microsecond after the command has been issued.

A good solution to this is to either change the styles before issuing the slideToggle command, or to give slideToggle a function to run after the slide is complete.
When do you want to make those css changes to the menu wrapper - before the slide or when the slide has finished?

Either, I do not mind.

I am also battling with the sidebar and @media min/max-width;

	$(window).resize(function() {
		var ab = $('body').width();
		if (ab > 964) {
			$('#TopNavList').css('display', 'block');
		} else {
			$('#TopNavList').css('visibility', 'hidden');
		}
	});

If this is matching the media queries then it should be checking if ab > 979, however with that, a bug is occurring on mobile flip where no menu shows I think due to the scrollbar as some browsers media screening include and some do not include the scrollbar width…

One thing at a time. To have the if statement part happen after the slideToggle has finished, put it in to its own function as a part of the slideToggle method.


$('.TopNavDropDown').click(function(){
    $('#TopNavList').slideToggle('slow', function () {
        if($('#TopNavList').is(':visible')){
            ...
        } else {
            ...
        }
    });
});

Updated the live view. This has partly solved things. The first time round it works but the second recurring only modifies the link styling and not the background styling.