Brauche bitte Rat bei FAQs bauen

[Lucas82]

Hi Leute, könnt ihr mir vielleicht helfen?

Ich würde sehr gerne eine Liste bauen, ähnlich wie die FAQ Liste auf der Seite hier: https://www.transparent-beraten.de/private-krankenversicherung/faq/

Wenn man schnell hintereinander mehrmals auf die Headlines klickt, fahren die Container mehrmals ein und aus. Warum passiert das bei mir? Kann man das vielleicht verhindern?

Hier ist mein HTML-Code:

<div class="menu">
<div class="item">
<h3 id="element-1" class="">Headline 1</h3>
<div class="content" id="element-1">
<p>test</p>
</div>
</div>
<div class="item">
<h3 id="element-2" class="">Headline 1</h3>
<div class="content" id="element-2">
<p>test</p>
</div>
</div>
</div>

Das Javascript:

$('.menu .item .content').slideUp(0);

$('.menu h3').click(function(){
var id = $(this).attr('data-id');
$('.menu .content[data-id='+id+']').slideToggle(300);
$('.menu .content[data-id='+id+']').parent('.item').toggleClass('open');
});


Vielleicht weiß ja einer bescheid.

 

[Twin_Four]

Einmal Anklicken zum ausfahren, einmal anklicken zum Einfahren.

Extra ändern weil User zu blöd sind das richtig anzuklicken oder wo liegt dein wirkliches Problem?

 

[r15ch13]

Auf der von dir verlinkten Seite passiert das gleiche.

 

[Kanibal]

$('.menu h3').click(function(){
var id = $(this).attr('data-id');
$('.menu .content[data-id='+id+']').stop().slideToggle(300);
$('.menu .content[data-id='+id+']').parent('.item').toggleClass('open');[/CODE]
});

Du musst die laufende Animation unterbrechen.

 

[Lucas82]

Danke Kanibal. Jetzt läufts richtig. DANKE!!!