Geek Answers Handbook

Onclick activated bootstrap battery behaves strangely

I want to call the switch function of the botstrap accordion when I click on the image map area. The problem is that she behaves strangely. When I click on any area for the first time, all elements of the accordion are displayed, then when I press it a second time, everything crashes, and finally, on the third click, and then it works as expected. I created an example on jsfiddle ( http://jsfiddle.net/adnank/SHdJm/4/ ).

I tried different settings, but this one seems to work most closely, as expected.

<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>

+8
jquery twitter-bootstrap accordion
source share
1 answer
  • When you work with the plugin with the download, and the toggle buttons are grouped, you do not need to call the reset method for each element, only for one. Therefore, the onclick handler might look like this: onclick="jQuery('#collapseOne').collapse('toggle');" . But in this case, you also need to initialize the parent switch option for each region.
  • You can connect more than one toggle button for one content block. Therefore, the onclick handler is optional and can be associated with data-toggle="collapse" data-parent="#faq" data-target="#collapseOne"

Working example: http://jsfiddle.net/SHdJm/8/

+7
source share

More articles:


All Articles