views:

328

answers:

1

We have a page with accordions. After the page loads, we open the accordion and it shows the data correctly in IE7 and Firefox but in IE6, it does not show the data at all. When we close the accordion and open it again, the data shows up. This behaviour occurs in different ways. In some cases, it does not show any data in the accordion whereas in other cases it shows part of the data. There are accordions where it shows all the data but does not apply all the styles required (margin-bottom not getting applied). When we close the accordion and open it again, it works fine and applies the style. The problem of styles not getting applied is consistently occurring in IE6.

JQuery used to open the accordion :

function expandPanel(titleBarElement){
    var panelGroup=$(titleBarElement).parent("div").parent("div");

    //collapse already open container
    var expandedPanel=$(panelGroup).find("div.expanded");
    for(i=0;i<expandedPanel.length;i++){
     var thisExpandedPanel=expandedPanel[i];
     $(thisExpandedPanel).removeClass("expanded");
     $(thisExpandedPanel).find(".contentContainer").slideUp(400);
    }

    //find panel we need to expand
    var goingToExpandPanel=$(titleBarElement).parent("div.expandGroup");

    var expandedTitle=$(expandedPanel).find(".title").html();
    var goingToExpandTitle=$(goingToExpandPanel).find(".title").html();

    if(expandedTitle!=goingToExpandTitle){
     $(goingToExpandPanel).find(".contentContainer").slideDown(400);
     $(goingToExpandPanel).addClass("expanded");
    }

    return false;
}