Jquery accordion isn't working correctly in Internet Explorer
<p>I have created an accordion effect in jquery with css. My code is following :</p>

<pre><code>$('.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
});
</code></pre>

<p>Below is my html code:</p>

<pre><code>&lt;h2 class="acc_trigger"&gt;
    &lt;div class="i_left"&gt;&lt;/div&gt;
    &lt;div class="i_mid"&gt; &lt;a href="#"&gt;General Information&lt;/a&gt;&lt;/div&gt;
    &lt;div class="i_right"&gt;&lt;/div&gt;
&lt;/h2&gt;
&lt;div class="acc_container"&gt;
    //some stuff
&lt;/div&gt;

&lt;h2 class="acc_trigger"&gt; 
    &lt;div class="i_left"&gt;&lt;/div&gt;
   &lt;div class="i_mid"&gt; &lt;a href="#"&gt;Subset Criterion&lt;/a&gt;  &lt;/div&gt;
     &lt;div class="i_right"&gt;&lt;/div&gt;
&lt;/h2&gt;
&lt;div class="acc_container"&gt;
    //some stuff
&lt;/div&gt;  
</code></pre>

<p>Below is my css code:</p>

<pre><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;
} 
</code></pre>

<p>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.</p>
