jQuery Forum

So, like many other before me, I need to troubleshoot an issue in IE7 with some accordion functionality on our site. The accordion is built in roder to accomodate extra elements (more than 5) by "cloning" the hidden items and throwing them into a new <ul>.

 

The problem is that when you click on the accordion, the content shows up even before the accordion drops down, and that content isn't respecting the stylesheet.

 

I've been told that I need to set up the code so that the ul loads first, then the hiddent content loads after. Presumably, this means that the cloned content would respect the css style.

 

I also believe that the changes that need to happen are in the code block for $newUL, but I'm not sure how I would need to modify it. I'm going to look into how cloning works and see if that's the source of my aggravation, but any additional help would be greatly appreciated.

 

Code follows below. many thanks! :-)

 

this.buildModuleAccordions = function() {
  console.log("building accordions...");
  self.settings.rightColAccordions.each(function(index) {
   var $this = $JQ(this);
   var size = $this.find('li').size();
   
   if(size < 6)
    return false
   else {
    var $hiddenItems = $this.find('li:gt(4)');
    $hiddenItems.hide();
    
    var $newUL = document.createElement('ul');
    $newUL = $JQ($newUL);
    $newUL.append($hiddenItems.clone().show());
    $newUL.hide();
    $this.parent('.module').append($newUL);
    
    var $trigger = document.createElement('div');
    $trigger = $JQ($trigger);
    $trigger.addClass('accordion-trigger').addClass('bg-beige');
    $trigger.attr('id', 'accordion-' + index);
    
    var triggerHTML = [
     '<a href="javascript:void(0)">Reveal all ',
      size,
     '</a>'
    ];
    
    triggerHTML = triggerHTML.join('');
    
    $trigger.html(triggerHTML);
    
    $this.parent('.module').append($trigger);
    
    $trigger.bind('click', function(e) {
     if(!$trigger.hasClass('open')) {
       $newUL.slideDown(1000, function(){$trigger.find('a').text('Hide');});
       $trigger.addClass('open');
       //$trigger.removeClass('bg-beige').addClass('bg-light-blue');
     } else {
      $trigger.removeClass('open');
      $newUL.slideUp(1000);
      $trigger.html(triggerHTML); 
      //$trigger.removeClass('bg-light-blue').addClass('bg-beige');
     }
    });
    
    //hover state for triggers, blue background and blue arrow
    $trigger.bind('mouseover', function(e){
       $trigger.removeClass('bg-beige').addClass('bg-light-blue');
    });
    
    $trigger.bind('mouseout', function(e){
       $trigger.removeClass('bg-light-blue').addClass('bg-beige');
    });
    
   }
   
  });
  
 }