IE doesn't work with jQuery.show ()
I have built some simple tabs that show the hidden div when clicked. Very simple. Everything works well except for IE. For some reason, even though I'm using the jQuery.show () function, it won't show the hidden div: block, but just keeps it hidden, which is very frustrating.
Sample page: http://www.puc.edu/alumni/give-puc
jQuery for tabs:
$('#teamTabs li').click(function() {
$('#teamTabs li').removeClass('selected');
$(this).addClass('selected');
$('.teamTab').hide();
var id = $(this).attr('id');
if (id == 'teamTab1') {
$('#team1').show();
} else if (id == 'teamTab2') {
$('#team2').show();
} else if (id == 'teamTab3') {
$('#team3').show();
} else if (id == 'teamTab4') {
$('#team4').show();
}//end else if
return false;
});//end click
Any ideas why IE won't set the div to display: block?
source to share
I understand that you already figured out that the problem was elsewhere, but for others who find this later (and to get this from the unanswered list), you can reduce / simplify your code a bit:
$('#teamTabs li').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
$('.teamTab').hide();
$('#team'+ this.id.replace('teamTab','')).show();
return false;
});
source to share
I had a similar problem. I found that IE was actually changing the display to a block, but also made each blockdisplay:none;
visibility:hidden;
I was able to display my items correctly by following these steps:
$('#team1').show(); // shows for all browsers but IE
if($.browser.msie){
$('#team1').css({"visibility":"visible"});
}
I found this using two warnings after narrowing my problem down to two possible CSS elements that might hide my HTML: display: none; and visibility: hidden.
It is guaranteed that if you execute this alert immediately after $('#team1').show();
alert( $('#team1').css("display"));
your display will be blocky and alert ($ ('# team1'). css ("visibility")); your visibility will be hidden.
It seems that IE automatically hides blocks when they are set to display "none" in css and then modified via JQuery. It also seems that this is not a problem for elements that are defined as display: block; These elements should always be in order if you first defined them in CSS.
Hope this helps someone else having this problem :)
source to share