IE7 issue w/ jQuery site feature

Question

I'm not entirely sure what's breaking here on this page: http://grandoaks.org/floor.html but it seems to only be broken in IE7 (IE8, FF3, Safari, Opera, Chrome, Camino all worked). When you mouseover the names of the suites, it should show a description by removing an 'active' class and applying it to the corresponding div, with the stylesheet setting display:none to inactive divs and display:block to actives. The same method is being applied to the images and that works fine though. Any help on this issue would be much appreciated!

Answer 1

Looking at this in IE 7 I can see that the "active" and "selected" classes are not being applied to the other div#unit# elements. I will look at the script, but something looks wrong there.

Answer 2

You have the same ID being used in multiple places, I'd resolve it by doing this:

change your <li> element to use rel="" like this:

<ul id="apt-list"> 
  <li rel="unit1" class="selected active"><span>Osprey</span></li> 
...then in #sidebar...
<a ...><img rel="unit1" ... /></a> 

Change your jquery to use that:

$("#apt-list li").click(function(){
  $(".selected").removeClass("selected");
  $(this).addClass("selected");
  var id = $(this).attr("rel");
  $("#sidebar img[rel="+ id +"], #"+id).addClass("selected");
});

$("#apt-list li").hover(function(){
  $(".active").removeClass("active");
  $(this).addClass("active");
  var id = $(this).attr("rel");
  $("#sidebar img[rel="+ id +"], #" + id).addClass("active");   
},function(){
  $(".active").removeClass("active");
  $(".selected").addClass("active");
});