DW CS5: CollapsiblePanels are not well in IE

Question

Hi NG,
i have some CollapsiblePanel on my side. It is working perfect under FF or Safari.
But under IE - 6 or 8 or 9 - i can ope  a panel. But than if i open a other one, it flashed me all the time some other panel too. It looks like a freak show!
Is there any idea?
To explain the error:
After i press a button to open a panel or close, it is closing and for some second it flashes the whole panel again. all of them.....
Here some Code:
<div id="CollapsiblePanel_1" class="CollapsiblePanel">
                <div class="CollapsiblePanelTab" tabindex="0">
              <table width="185" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td height="27"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/products_a.gif" name="products" width="185" height="27" border="0" id="products" onClick="cpg.closeAllPanels();cpg_2.close();" onMouseOver="MM_swapImage('products','','includes/languages/<?php echo $ordner; ?>/images/buttons/products_b.gif',1)" onMouseOut="MM_swapImgRestore()"/></td>
                </tr>
            </table>
            </div>
            <div class="CollapsiblePanel">
          <div class="CollapsiblePanelTab" tabindex="0">
            <table width="185" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="27"><a href="<?php echo LINK_SITE_PROD_DD ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_roofing_a.gif" alt="" name="prod_roofing" width="185" height="24" border="0" id="prod_roofing"  onclick="cpg.closeAllPanels();" onMouseOver="MM_swapImage('prod_roofing','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_roofing_b.gif','kugel_8','','images/balls/balls_b_09.png',1)" onMouseOut="MM_swapImgRestore()"/></a></td>
                </tr>
              </table>
          </div>
          <div class="CollapsiblePanelContent">
            <table width="185" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="27"><a href="<?php echo LINK_SITE_PROD_DW ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_roofdeck_service_a.gif" alt="" name="prod_roof_service" width="185" height="24" border="0" id="prod_roof_service" onMouseOver="MM_swapImage('prod_roof_service','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_roofdeck_service_b.gif','kugel_8','','images/balls/balls_b_09.png',1)" onMouseOut="MM_swapImgRestore()" /></a></td>
                </tr>
              </table>
            <table width="185" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="27"><a href="<?php echo LINK_SITE_PROD_DK ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_roofdeck_konfig_a.gif" alt="" name="prod_roof_konfig" width="185" height="24" border="0" id="prod_roof_konfig" onMouseOver="MM_swapImage('prod_roof_konfig','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_roofdeck_konfig_b.gif','kugel_8','','images/balls/balls_b_09.png',1)" onMouseOut="MM_swapImgRestore()" /></a></td>
                </tr>
              </table>
        </div>
     </div>
     <div class="CollapsiblePanel">
          <div class="CollapsiblePanelTab" tabindex="0">
            <table width="185" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="27"><a href="<?php echo LINK_SITE_PROD_K ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_roofklempnerei_a.gif" alt="" name="prod_klempner" width="185" height="24" border="0" id="prod_klempner"  onclick="cpg.closeAllPanels();" onMouseOver="MM_swapImage('prod_klempner','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_roofklempnerei_b.gif','kugel_4','','images/balls/balls_b_10.png',1)" onMouseOut="MM_swapImgRestore()"/></a></td>
                </tr>
              </table>
          </div>
          <div class="CollapsiblePanelContent">
            <table width="185" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="27"><a href="<?php echo LINK_SITE_PROD_KK ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_roofklemp_konfig_a.gif" alt="" name="prod_klemptner_konfig" width="185" height="24" border="0" id="prod_klemptner_konfig" onMouseOver="MM_swapImage('prod_klemptner_konfig','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_roofklemp_konfig_b.gif','kugel_4','','images/balls/balls_b_10.png',1)" onMouseOut="MM_swapImgRestore()" /></a></td>
                </tr>
              </table>
          </div>
     </div>
</div>
<div id="CollapsiblePanel_2" class="CollapsiblePanel">
                <div class="CollapsiblePanelTab" tabindex="0">
                  <table width="185" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td height="27"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/contact_a.gif" name="contact" width="185" height="27" border="0" id="contact" onClick="cpg.closeAllPanels();cpg_1.close();cpg_2.close();" onMouseOver="MM_swapImage('contact','','includes/languages/<?php echo $ordner; ?>/images/buttons/contact_b.gif',1)" onMouseOut="MM_swapImgRestore()"/></td>
                    </tr>
                  </table>
                </div>
                <div class="CollapsiblePanelContent">
                  <table width="185" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td height="27"><a href="<?php echo LINK_SITE_CONTACT_T ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/contact_telefon_a.gif" alt="" name="contacte_fon" width="185" height="24" border="0" id="contacte_fon" onMouseOver="MM_swapImage('contacte_fon','','includes/languages/<?php echo $ordner; ?>/images/buttons/contact_telefon_b.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></td>
                    </tr>
                  </table>
                  <table width="185" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td height="27"><a href="<?php echo LINK_SITE_CONTACT_F ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/contact_formular_a.gif" alt="" name="contact_form" width="185" height="24" border="0" id="contact_form" onMouseOver="MM_swapImage('contact_form','','includes/languages/<?php echo $ordner; ?>/images/buttons/contact_formular_b.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></td>
                    </tr>
                  </table>
                <table width="185" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td height="27"><a href="<?php echo LINK_SITE_CONTACT_A ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/contact_map_a.gif" alt="" name="contact_map" width="185" height="24" border="0" id="contact_map" onMouseOver="MM_swapImage('contact_map','','includes/languages/<?php echo $ordner; ?>/images/buttons/contact_map_b.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></td>
                  </tr>
                  </table>
                </div>
            </div>
<script type="text/javascript">
var cpg = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup", { contentIsOpen: false });
var cpg_1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel_1", {contentIsOpen:false});
var cpg_2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel_2", {contentIsOpen:false});
  </script>
Tanks for help
TELLO
Message was edited by: TELLO_DE

Answer 1

It works without animation fine. On FF or Safari also with animation.
But in IE it is open all the panels for short second when i click on something.... mmmmmm
// and i was not correctly copy&paste the code. I have the group there too.
This is now the original code:
<table width="185" border="0" cellspacing="0" cellpadding="0">
              <div id="navi_aktuelles"><a href="<?php echo LINK_SITE_AKTUELLES ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/aktuelles_a.gif" name="aktuelles" width="185" height="27" border="0" id="aktuelles" onClick="cpg.closeAllPanels();cpg_1.close();cpg_2.close();" onMouseOver="MM_swapImage('aktuelles','','includes/languages/<?php echo $ordner; ?>/images/buttons/aktuelles_b.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
              <div id="navi_unternehmen"><a href="<?php echo LINK_SITE_UNTERNEHMEN ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/unternehmen_a.gif" name="unternehmen" width="185" height="27" border="0" id="unternehmen" onClick="cpg.closeAllPanels();cpg_1.close();cpg_2.close();" onMouseOver="MM_swapImage('unternehmen','','includes/languages/<?php echo $ordner; ?>/images/buttons/unternehmen_b.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
              <div id="navi_konfigurator"><a href="<?php echo LINK_SITE_KONFIGURATOR ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/konfigurator_a.gif" name="konfigurator" width="185" height="27" border="0" id="konfigurator" onClick="cpg.closeAllPanels();cpg_1.close();cpg_2.close();" onMouseOver="MM_swapImage('konfigurator','','includes/languages/<?php echo $ordner; ?>/images/buttons/konfigurator_b.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
<div id="CollapsiblePanel_1" class="CollapsiblePanel">
                <div class="CollapsiblePanelTab" tabindex="0">
              <div id="navi_produkte"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/produkte_a.gif" name="produkte" width="185" height="27" border="0" id="produkte" onClick="cpg.closeAllPanels();cpg_2.close();" onMouseOver="MM_swapImage('produkte','','includes/languages/<?php echo $ordner; ?>/images/buttons/produkte_b.gif',1)" onMouseOut="MM_swapImgRestore()"/></div>
            </div>
              <div class="CollapsiblePanelContent">
              <div id="CollapsiblePanelGroup" class="CollapsiblePanelGroup">
            <div id="navi_abdichtungen"><a href="<?php echo LINK_SITE_PROD_ABDICHTUNGEN ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_abdichtung_a.gif" alt="" name="prod_abdichtung" width="185" height="24" border="0" id="prod_abdichtung" onClick="cpg.closeAllPanels();" onMouseOver="MM_swapImage('prod_abdichtung','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_abdichtung_b.gif','kugel_12','','images/kugeln/kugeln_b_02.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
            <div id="navi_asbest"><a href="<?php echo LINK_SITE_PROD_ASBEST ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_asbest_a.gif" alt="" name="prod_asbest" width="185" height="24" border="0" id="prod_asbest"  onclick="cpg.closeAllPanels();" onMouseOver="MM_swapImage('prod_asbest','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_asbest_b.gif','kugel_9','','images/kugeln/kugeln_b_08.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
            <div class="CollapsiblePanel">
          <div class="CollapsiblePanelTab" tabindex="0">
            <div id="navi_dachdeckerei"><a href="<?php echo LINK_SITE_PROD_DACHDECKEREI ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_dachdeckerei_a.gif" alt="" name="prod_dachdeckerei" width="185" height="24" border="0" id="prod_dachdeckerei"  onclick="cpg.closeAllPanels();" onMouseOver="MM_swapImage('prod_dachdeckerei','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_dachdeckerei_b.gif','kugel_8','','images/kugeln/kugeln_b_09.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
          </div>
          <div class="CollapsiblePanelContent">
            <div id="navi_dachwartung"><a href="<?php echo LINK_SITE_PROD_DACH_WARTUNG ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_dachdeck_wartung_a.gif" alt="" name="prod_dach_wartung" width="185" height="24" border="0" id="prod_dach_wartung" onMouseOver="MM_swapImage('prod_dach_wartung','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_dachdeck_wartung_b.gif','kugel_8','','images/kugeln/kugeln_b_09.png',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
            <div id="navi_dachkonfig"><a href="<?php echo LINK_SITE_PROD_DACH_KONFIG ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_dachdeck_konfig_a.gif" alt="" name="prod_dach_konfig" width="185" height="24" border="0" id="prod_dach_konfig" onMouseOver="MM_swapImage('prod_dach_konfig','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_dachdeck_konfig_b.gif','kugel_8','','images/kugeln/kugeln_b_09.png',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
        </div>
     </div>
     <div class="CollapsiblePanel">
          <div class="CollapsiblePanelTab" tabindex="0">
            <div id="navi_prodklempner"><a href="<?php echo LINK_SITE_PROD_KLEMPNER ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_dachklempnerei_a.gif" alt="" name="prod_klempner" width="185" height="24" border="0" id="prod_klempner"  onclick="cpg.closeAllPanels();" onMouseOver="MM_swapImage('prod_klempner','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_dachklempnerei_b.gif','kugel_4','','images/kugeln/kugeln_b_10.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
          </div>
          <div class="CollapsiblePanelContent">
           <div id="navi_proklempkonfig"><a href="<?php echo LINK_SITE_PROD_KLEMPNER_KONFIG ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_dachklemp_konfig_a.gif" alt="" name="prod_klemptner_konfig" width="185" height="24" border="0" id="prod_klemptner_konfig" onMouseOver="MM_swapImage('prod_klemptner_konfig','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_dachklemp_konfig_b.gif','kugel_4','','images/kugeln/kugeln_b_10.png',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
          </div>
     </div>
     <div class="CollapsiblePanel">
          <div class="CollapsiblePanelTab" tabindex="0">
           <div id="navi_progeruestbau"><a href="<?php echo LINK_SITE_PROD_GERUESTBAU ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_geruestbau_a.gif" alt="" name="prod_geruestbau" width="185" height="24" border="0" id="prod_geruestbau"  onclick="cpg.closeAllPanels();" onMouseOver="MM_swapImage('prod_geruestbau','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_geruestbau_b.gif','kugel_3','','images/kugeln/kugeln_b_07.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
          </div>
          <div class="CollapsiblePanelContent">
           <div id="navi_progeruestkonfig"><a href="<?php echo LINK_SITE_PROD_GERUEST_KONFIG ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_geruest_konfig_a.gif" alt="" name="prod_geruest_konf" width="185" height="24" border="0" id="prod_geruest_konf" onMouseOver="MM_swapImage('prod_geruest_konf','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_geruest_konfig_b.gif','kugel_3','','images/kugeln/kugeln_b_07.png',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
          </div>
     </div>
            <div id="navi_prosolar"><a href="<?php echo LINK_SITE_PROD_SOLAR ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_solar_a.gif" alt="" name="prod_solar" width="185" height="24" border="0" id="prod_solar"  onclick="cpg.closeAllPanels();cpg_2.closeAllPanels();" onMouseOver="MM_swapImage('prod_solar','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_solar_b.gif','kugel_12','','images/kugeln/kugeln_b_02.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
            <div id="navi_prozimmerei"><a href="<?php echo LINK_SITE_PROD_ZIMMEREI ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/prod_zimmerei_a.gif" alt="" name="prod_zimmerei" width="185" height="24" border="0" id="prod_zimmerei"  onclick="cpg.closeAllPanels();cpg_2.closeAllPanels();" onMouseOver="MM_swapImage('prod_zimmerei','','includes/languages/<?php echo $ordner; ?>/images/buttons/prod_zimmerei_b.gif','kugel_9','','images/kugeln/kugeln_b_08.png',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
                </div>
               </div>
              </div>
              <div id="navi_referenzen"><a href="<?php echo LINK_SITE_REFERENZEN ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/referenzen_a.gif" name="referenzen" width="185" height="27" border="0" id="referenzen" onClick="cpg.closeAllPanels();cpg_1.close();cpg_2.close();" onMouseOver="MM_swapImage('referenzen','','includes/languages/<?php echo $ordner; ?>/images/buttons/referenzen_b.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
             <div id="navi_galerie"><a href="<?php echo LINK_SITE_GALERIE ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/galerie_a.gif" name="galerie" width="185" height="27" border="0" id="galerie" onClick="cpg.closeAllPanels();cpg_1.close();cpg_2.close();" onMouseOver="MM_swapImage('galerie','','includes/languages/<?php echo $ordner; ?>/images/buttons/galerie_b.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
              <div id="navi_jobs"><a href="<?php echo LINK_SITE_JOBS ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/jobs_a.gif" name="jobs" width="185" height="27" border="0" id="jobs" onClick="cpg.closeAllPanels();cpg_1.close();cpg_2.close();" onMouseOver="MM_swapImage('jobs','','includes/languages/<?php echo $ordner; ?>/images/buttons/jobs_b.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
              <div id="CollapsiblePanel_2" class="CollapsiblePanel">
                <div class="CollapsiblePanelTab" tabindex="0">
                 <div id="navi_kontakt"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/kontakt_a.gif" name="kontakt" width="185" height="27" border="0" id="kontakt" onClick="cpg.closeAllPanels();cpg_1.close();cpg_2.close();" onMouseOver="MM_swapImage('kontakt','','includes/languages/<?php echo $ordner; ?>/images/buttons/kontakt_b.gif',1)" onMouseOut="MM_swapImgRestore()"/></div>
                </div>
                <div class="CollapsiblePanelContent">
                  <div id="navi_konttelefon"><a href="<?php echo LINK_SITE_KONTAKT_TELEFON ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/kontakt_telefon_a.gif" alt="" name="kontakte_fon" width="185" height="24" border="0" id="kontakte_fon" onMouseOver="MM_swapImage('kontakte_fon','','includes/languages/<?php echo $ordner; ?>/images/buttons/kontakt_telefon_b.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
                 <div id="navi_kontform"><a href="<?php echo LINK_SITE_KONTAKT_FORMULAR ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/kontakt_formular_a.gif" alt="" name="kontakt_form" width="185" height="24" border="0" id="kontakt_form" onMouseOver="MM_swapImage('kontakt_form','','includes/languages/<?php echo $ordner; ?>/images/buttons/kontakt_formular_b.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
               <div id="navi_kontanfahrt"><a href="<?php echo LINK_SITE_KONTAKT_ANFAHRT ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/kontakt_anfahrt_a.gif" alt="" name="kontakt_anfahrt" width="185" height="24" border="0" id="kontakt_anfahrt" onMouseOver="MM_swapImage('kontakt_anfahrt','','includes/languages/<?php echo $ordner; ?>/images/buttons/kontakt_anfahrt_b.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
                </div>
            </div>
              <div id="navi_downloads"><a href="<?php echo LINK_SITE_DOWNLOADS ?>"><img src="includes/languages/<?php echo $ordner; ?>/images/buttons/downloads_a.gif" name="downloads" width="185" height="27" border="0" id="downloads" onClick="cpg.closeAllPanels();cpg_1.close();cpg_2.close();" onMouseOver="MM_swapImage('downloads','','includes/languages/<?php echo $ordner; ?>/images/buttons/downloads_b.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></div>
        </table>
<script type="text/javascript">
var cpg = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup", { contentIsOpen: false });
var cpg_1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel_1", {contentIsOpen:false});
var cpg_2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel_2", {contentIsOpen:false});
  </script>
TELLO