Bootstrap Akkordeon Toggle ausgelöst von onclick benehmen sich komisch

Question

Ich möchte Toggle-Funktion von Bootstrap Akkordeon beim Klick auf Image Map Bereich auslösen. Das Problem ist, dass es sich seltsam verhält. Wenn ich zum ersten Mal auf einen Bereich klicke, werden alle Akkordeon-Elemente angezeigt, dann werden beim zweiten Klick alle zusammen und schließlich beim dritten Klick und später wie erwartet. Ich habe ein Beispiel auf jsfiddle() erstellt.

Ich habe verschiedene Setups ausprobiert, aber dieses scheint am genauesten zu funktionieren, was erwartet wird.

<div class="accordion" id="faq"> 
<img src="http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg" alt="Leistungssprektrum" id="kreis" usemap="#map1"> 
    <map name="map1"> 
      <area shape="poly" coords="220,240,290,135,365,175,366,238" alt="Risikoanalyse" onmouseover="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Risikoanalyse.jpg'" onmouseout="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg'" onclick="jQuery('#collapseOne').collapse('toggle');jQuery('#collapseTwo').collapse('hide');jQuery('#collapseThree').collapse('hide');jQuery('#collapseFour').collapse('hide');jQuery('#collapseFive').collapse('hide');jQuery('#collapseSix').collapse('hide');"> 
      <area shape="poly" coords="266,252,377,252,377,193,420,193,420,288,267,288" alt="Deckungskonzept" onmouseover="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Deckungskonzept.jpg'" onmouseout="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg'" onclick="jQuery('#collapseOne').collapse('hide');jQuery('#collapseTwo').collapse('toggle');jQuery('#collapseThree').collapse('hide');jQuery('#collapseFour').collapse('hide');jQuery('#collapseFive').collapse('hide');jQuery('#collapseSix').collapse('hide');"> 
      <area shape="poly" coords="270,340,400,340,450,302,400,423,360,420,356,376,276,378" alt="Ausschreibung" onmouseover="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Ausschreibung.jpg'" onmouseout="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg'" onclick="jQuery('#collapseOne').collapse('hide');jQuery('#collapseTwo').collapse('hide');jQuery('#collapseThree').collapse('toggle');jQuery('#collapseFour').collapse('hide');jQuery('#collapseFive').collapse('hide');jQuery('#collapseSix').collapse('hide');" style="cursor: pointer;"> 
      <area shape="poly" coords="207,395,330,395,345,465,207,465" alt="Vergabe" onmouseover="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Vergabe.jpg'" onmouseout="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg'" onclick="jQuery('#collapseOne').collapse('hide');jQuery('#collapseTwo').collapse('hide');jQuery('#collapseThree').collapse('hide');jQuery('#collapseFour').collapse('toggle');jQuery('#collapseFive').collapse('hide');jQuery('#collapseSix').collapse('hide');" style="cursor: pointer;"> 
      <area shape="poly" coords="48,320,222,314,220,350,188,417,188,474,95,434,47,329" alt="Vertragsbetreuung" onmouseover="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Vertragsbetreuung.jpg'" onmouseout="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg'" onclick="jQuery('#collapseOne').collapse('hide');jQuery('#collapseTwo').collapse('hide');jQuery('#collapseThree').collapse('hide');jQuery('#collapseFour').collapse('hide');jQuery('#collapseFive').collapse('toggle');jQuery('#collapseSix').collapse('hide');" style="cursor: pointer;"> 
      <area shape="poly" coords="11,313,11,210,66,98,92,115,90,235,189,235,189,289,52,310" alt="Schadensabwicklung" onmouseover="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Schadensabwicklung.jpg'" onmouseout="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg'" onclick="jQuery('#collapseOne').collapse('hide');jQuery('#collapseTwo').collapse('hide');jQuery('#collapseThree').collapse('hide');jQuery('#collapseFour').collapse('hide');jQuery('#collapseFive').collapse('hide');jQuery('#collapseSix').collapse('toggle');" style="cursor: hand;"> 
    </map>   
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#collapseOne"> 
      1. Risk analyses 
     </a> 
    </div> 
    <div id="collapseOne" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      Lorem ipsum 
     </div> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#collapseTwo"> 
      2. Coverage concepts 
     </a> 
    </div> 
    <div id="collapseTwo" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      Lorem ipsum 
     </div> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#collapseThree"> 
      3. Tender 
     </a> 
    </div> 
    <div id="collapseThree" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      Lorem ipsum 
     </div> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#collapseFour"> 
      4. Authorisation 
     </a> 
    </div> 
    <div id="collapseFour" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      Lorem ipsum 
     </div> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#collapseFive"> 
      5. Contract handling 
     </a> 
    </div> 
    <div id="collapseFive" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      Lorem ipsum 
     </div> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#collapseSix"> 
      6. Claim settlement 
     </a> 
    </div> 
    <div id="collapseSix" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      Lorem ipsum 
     </div> 
    </div> 
</div> 

Answer 1

1. Wenn Sie mit Bootstrap-Zusammenbruch Plugin-Version arbeiten und Tasten umschalten sind groupped Sie müssen für jedes Element Methode Zusammenbruch nicht nennen, nur für einen. So kann onclick Handler aussehen wie: onclick="jQuery('#collapseOne').collapse('toggle');". In diesem Fall müssen Sie jedoch auch die Option für die Umschaltüberlagerung für jeden Bereich initialisieren.
2. Sie können mehrere Umschalttasten für einen Inhaltsblock anhängen. So onclick Handler nicht erforderlich ist und kann mit data-toggle="collapse" data-parent="#faq" data-target="#collapseOne"

Arbeitsbeispiel relaced werden: http://jsfiddle.net/SHdJm/8/