ie7 compatibility

[White_Lily]

Hey,

 

I have chosen to have the menu on a CMS im building have an accordion effect.

 

I have it working in all browsers except IE7, now I know this browser is fairly old, but since a lot of people still use it fairly regularly my company has made it mandatory to make sure it functions correctly in IE7 to.

 

Here is the jQuery:

 

$(function(){
	$(".accordionButton").on("click", function(){
		if($(this).next().is(":hidden") == true){
			$(".accordionContent").slideUp("slow");
			$(this).next().slideDown("slow");
		}else if($(this).next().is(":hidden") == false)
			$(".accordionContent").slideUp("slow");
	});
});

 

I found out the .on("click") part works, it's when it comes to the conditions that it then decides to do nothing.

 

Any ideas?

 

- Lily

 

P.S: I have look on google for function compatibility issues regarding next() and is() and cant seem to find any on these. SlideUp/Down() I know work since I have used them in the past for banners and other client requirements.

Edited March 6, 2013 by Maq
Changed slideDown to slideUp under else if

[White_Lily]

the line under the elseif statement should be slideUp not slideDown - sorry, its not letting me edit the post.

[White_Lily]

I have tried various things such as chnaging the css and jquery to use animate({}), overflow, and height adjustments but nothing seems to be working.

[Adam]

Can't see anything of note. Can you add in some console.log calls to debug where the break is happening?

[White_Lily]

Hey, tried it and its skipping the initial if statement completely and going straight to the elseif.

 

This is only happening in ie7.

 

$(".accordionButton").click(function(){
console.log("BUtton Clicked");
if($(this).next().is(":hidden") == true){
$(".accordionContent").slideUp("slow", function(){
console.log("Slide Up 1");
});
$(this).next().slideDown("slow", function(){
console.log("Slide Down");
});
}else if($(this).next().is(":hidden") == false){
$(".accordionContent").slideUp("slow", function(){
console.log("Slide Up 2");
});
}
});

Edited March 6, 2013 by White_Lily

[.josh]

Firstly, try removing the equality operator. That's how the jQuery documentation shows it.  (I also removed the eslif condition because it's the exact opposite of the if, so it is superfluous):

 

 

$(function(){
    $(".accordionButton").on("click", function(){
        if($(this).next().is(":hidden")){
            $(".accordionContent").slideUp("slow");
            $(this).next().slideDown("slow");
        }else
           $(".accordionContent").slideUp("slow");
    });
});

 

 

If that doesn't work, try giving some of the answers on this link a try:

 

http://stackoverflow.com/questions/178325/testing-if-something-is-hidden-with-jquery

 

Also, what version of jQuery are you using? 

[White_Lily]

Still nothing appears to work in ie7.

 

I'm wondering if it would have anything to do with the DOCTYPE? the doctype im using is transitional. (the reason for this suggestion is that ive seen many problems solved just by changing the doctype).