El acordeón jquery no funciona correctamente en Internet Explorer

I have created an accordion effect in jquery with css. My code is following :

$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(e){

    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
        $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    e.stopPropagation();
    return false; //Prevent the browser jump to the link anchor
});

Below is my html code:

<h2 class="acc_trigger">
    <div class="i_left"></div>
    <div class="i_mid"> <a href="#">General Information</a></div>
    <div class="i_right"></div>
</h2>
<div class="acc_container">
    //some stuff
</div>

<h2 class="acc_trigger"> 
    <div class="i_left"></div>
   <div class="i_mid"> <a href="#">Subset Criterion</a>  </div>
     <div class="i_right"></div>
</h2>
<div class="acc_container">
    //some stuff
</div>  

Below is my css code:

h2.acc_trigger
     {
    color:#0000000;
    text-decoration:none;
    padding: 0; 
    height:30px;    
    line-height: 0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    float:left;
    margin-top:0px;
    width:100%;
    margin-bottom:0px;
    }
h2.acc_trigger a
 {  color:#000000;
    text-decoration:none;
    position:relative;
    top:12px;
   padding:5px 5px 5px 20px;
  background:url(../images/arrow_up.png) no-repeat scroll 0 6px transparent;

    }
h2.acc_trigger a:hover 
{
    color: #000;
}
h2.acc_trigger.active
{
 background:none;   
 text-decoration:none;
  margin:0px 0 5px 0px

}

h2.acc_trigger.active a
  {
    padding-left:20px;
    position:relative;
    top:12px;
    background:url(../images/arrow_down.png) no-repeat scroll -1px 10px transparent;
    color:#000000;
    text-decoration:none;
 }
.acc_container 
{
     margin: 0px 0px 8px 5px;
     padding: 0;
     overflow: hidden;
     width: 91%;
     clear: both;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px; 
}
.acc_container  table td{
    font-size:11px;
}
.acc_container .block 
{
    padding: 20px;
}
.acc_container .block p
 {
    padding: 5px 0;
    margin: 5px 0;
}
.acc_container h3
 {
    font: 2.5em normal Georgia, "Times New Roman", Times, serif;
    margin: 0 0 10px;
    padding: 0 0 5px 0;
    border-bottom: 1px dashed #ccc;
}
.acc_container img 
{
    float: left;
    margin: 10px 15px 15px 0;
    padding: 5px;
    background: #ddd;
    border: 1px solid #ccc;
} 

It is working absolutely fine in mozilla firefox, but in other browsers (IE) accrdion are coming with a bubbling effect and also somewhat overlapping. Please help.

preguntado el 08 de noviembre de 11 a las 09:11

change the css3 selectors (:hidden etc.) with .attr() or $('[...]'), this usually solves my problems with IE -

I am not sure if the problem is the browser. I am using the accordion and its behaviour is the same for IE, mozilla and chrome. -

1 Respuestas

Had the similar problem, following fixed it:

$("#accordion").accordion({ autoHeight: false,
                                        animated : false
});

respondido 08 nov., 11:13

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.