jQuery slideToggle verrückt - warum?

Question

Ich habe versucht, im Internet nach der Lösung zu suchen, aber ich habe nichts wirklich hilfreich gefunden.
Ich baue eine TwitchTV App (FreeCodeCamp challenge) und möchte so etwas machen: Wenn der Status online ist (.online), kann ich darauf klicken und ein Panel (.slide) mit Streaming Info wird rutschen runter, dann hoch, wenn ich nochmal klicke.
(EDIT:
Um zu klären. Ich habe ein paar Elemente mit derselben Klasse habe aber nur die Geschwister der ein Ziel will ich klicken)
Das Problem ist, slideToggle nach oben und unten ein paar Mal geht (Die Anzahl ist je nach Element unterschiedlich), und ich weiß nicht wirklich warum. Ich kann nur vermuten, es hat etwas mit Klassen zu tun hat und next():

$(".online").on("click", function() { 
    $(this).next(".slide").slideToggle("slow"); 
}); 

Können Sie ein wenig helfen? Was bewirkt, dass dieses Panel wie verrückt auf und ab gleitet? Hast du ein paar Tipps, wie das funktioniert?
Mein codepen ist https://codepen.io/Strzesia/pen/PJVjbR/

Answer 1

$(this).nextUntil('.slide').next().slideToggle("slow"); verwendet

$(".online").on("click", function() { 
 
    $(this).nextUntil('.slide').next().slideToggle("slow"); 
 
});

.slide{width:400px;height:100px;background-color:pink;margin:5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="online">click</div> 
 
<div></div> 
 
<div></div> 
 
<div class="slide"></div> 
 

 
<div class="online">click</div> 
 
<div></div> 
 
<div class="slide"></div>