jQuery slideToggleが狂ってしまう - なぜですか？

Question

私は解決策をインターネットで検索しようとしましたが、本当に役立つものは何も見つかりませんでした。
私はTwitchTVアプリケーション（FreeCodeCampチャレンジ）を作成しています。そのようなものを作りたいと思います：ステータスがオンライン（.online）の場合は、それをクリックして、ストリーミング情報を含むパネル（.slide）をスライドさせますもう一度クリックすると上に戻ります。
（EDIT：
明確にする：私は同じクラスでいくつかの要素を持っていますが、私はクリック1の唯一の兄弟をターゲットにしたい。）
問題はslideToggleが上下に数回行き、あります（数字は要素によって異なります）、なぜ私は本当に知りません。私はそれがクラスと次のものと関係があると推測することができます：

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

少し助けてもらえますか？このパネルが狂ったように上下にスライドする原因は何ですか？この仕事をする方法についてのヒントはありますか？
マイcodepenがhttps://codepen.io/Strzesia/pen/PJVjbR/

Answer 1

それは多分、異なる状況で働くだろうが、問題は、私は「オンライン」クラスとして、いくつかの要素を持っている、ある$(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>