jQuery slideToggle devient fou - pourquoi?

Question

J'ai essayé de rechercher sur Internet la solution, mais je n'ai pas vraiment trouvé quelque chose d'utile. Je construis une application TwitchTV (défi FreeCodeCamp) et je veux faire quelque chose comme ça: si le statut est en ligne (.online), je peux cliquer dessus et un panneau (.slide) avec des informations de streaming va glisser vers le bas, puis vers le haut si je clique à nouveau.
(EDIT:
Pour clarifier. J'ai quelques éléments avec la même classe, mais veulent cibler seulement le frère de celui que je clique)
Le problème est, slideToggle monte et descend quelques fois (le nombre est différent en fonction de l'élément), et je ne sais pas vraiment pourquoi. Je peux seulement deviner que ça a quelque chose à voir avec les classes et next():

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

Pouvez-vous aider un peu? Qu'est-ce qui fait que ce panneau glisse de haut en bas comme un fou? Avez-vous quelques conseils sur la façon de faire ce travail?
Mon codepen est https://codepen.io/Strzesia/pen/PJVjbR/

Answer 1

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

$(".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>