.slidetoggle and IE8 - only slides up, never slides down

.slidetoggle and IE8 - only slides up, never slides down

I'm not sure what the issue is here as the audiospace and videospace slideToggle's work perfectly fine.  The last one, downloadspace, only slides up and never slides down in IE 8.  It works in Chrome just fine.  What gives?

Here is my code, not sure what is going wrong.  I've gone over the code over and over and now it's starting to blend together...  ;)



  1. <script>
  2.   $(function() { // document.ready
  3. /*   $('.audiospace').hide(),
  4. $('.videospace').hide(),
  5. $('.downloadspace').hide();*/
  6. $('a#audio').click(function() {
  7. $(this).parent().next('div.audiospace').slideToggle('slow');
  8. });
  9. $('a#video').click(function() {
  10. $(this).parent().next('div.videospace').slideToggle('slow');
  11. });
  12. $('a#download').click(function() {
  13. $(this).parent().next('div.downloadspace').slideToggle('slow');
  14. });
  15.   });
  16.   </script>
Here is the html, just in case anyone needs to see it...

  1. <div class='wr' style="display:inline-block"> 
  2. <div class='audio' style="display:inline"> 
  3. <img src='http://www.thecatalystchurch.com/images/play_icon.png' width='11' height='9'>&nbsp;<a href='#' id='audio'>Listen Online</a> 
  4. </div>&nbsp;|&nbsp;<div class='audiospace' style='display:none;'> 
  5. <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='470' height='24' id='single1' name='single1'> 
  6.  <param name='movie' value='http://www.thecatalystchurch.com/mediaplayer/player.swf'> 
  7.  <param name='allowfullscreen' value='true'> 
  8.  <param name='allowscriptaccess' value='always'> 
  9.  <param name='wmode' value='transparent'> 
  10.  <param name='flashvars' value='file=http://www.thecatalystchurch.com/messages/2010/lo/08-29-10.mp3'> 
  11. <embed
  12.  id='single2'
  13.  name='single2'
  14.  src='http://www.thecatalystchurch.com/mediaplayer/player.swf'
  15.  width='470'
  16.  height='24'
  17.  bgcolor='#000000'
  18.  allowscriptaccess='always'
  19.  allowfullscreen='true'
  20.  flashvars='file=http://www.thecatalystchurch.com/messages/2010/lo/08-29-10.mp3'
  21. /> 
  22. </object> 
  23.  </div> 
  24. <div class='video' style="display:inline-block"> 
  25. <img src='http://www.thecatalystchurch.com/images/video_icon.png' width='16' height='16'>&nbsp;<a href='#' id='video'>Watch Online</a></div>&nbsp;|&nbsp;
  26. <div class='videospace' style='display:none;'> 
  27.  <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='470' height='320' id='single1' name='single1'> 
  28. <param name='movie' value='http://www.thecatalystchurch.com/mediaplayer/player.swf'> 
  29. <param name='allowfullscreen' value='true'> 
  30. <param name='allowscriptaccess' value='always'> 
  31. <param name='wmode' value='transparent'> 
  32. <param name='flashvars' value='file=http://ustream.vo.llnwd.net/pd5/0/1/9/9230/9230771/1_4912912_9230771.flv'> 
  33.  <embed
  34. id='single2'
  35. name='single2'
  36. src='http://www.thecatalystchurch.com/mediaplayer/player.swf'
  37. width='470'
  38. height='320'
  39. bgcolor='#000000'
  40. allowscriptaccess='always'
  41. allowfullscreen='true'
  42. flashvars='file=http://ustream.vo.llnwd.net/pd5/0/1/9/9230/9230771/1_4912912_9230771.flv'
  43.  /> 
  44.  </object> 
  45. </div><div class='download' style="display:inline-block"> 
  46. <img src='http://www.thecatalystchurch.com/images/download_icon.png' width='9' height='11'>&nbsp;<a href='#' id='download'>Download</a></div> 
  47. <div class='downloadspace' style='display:none;'><span style='font-style:italic;font-size:12px'><a href='/messages/2010/lo/08-29-10.mp3'>Low Quality - 10.83 MB</a>&nbsp;|&nbsp;<a href='/messages/2010/hi/08-29-10.mp3'>High Quality - 32.49 MB</a></span></div> 
  48.  </div>