ボタンにトグルdivを作成するjQueryを使用して絶対位置と相対位置を指定してforeachループ内をクリック

Question

絶対位置と相対位置を使用してボックス内のすべての項目を表示するforeachループを持つビューを作成し、リストを作成しました。

ボタンをクリックしてjQueryにワイヤリングすると、クリックすると一時的に次のリストアイテムがプッシュされ、表示したい情報が含まれているdivが表示されます（再度押されると非表示になります） 。リストの項目は高さが固定されているので、divの空白はいつでも残すことができますが、可能であれば、私はそれを元の形にしたいと思います。

ここでうまくいけば、私の目標片付け助け絵、です： https://i.imgur.com/pkruI6s.png をHR-sがその下のリスト項目に属しているので、あなたが見る1は最初のものでなければなりませんの残りと共に、プッシュダウンページ。

ご協力いただきありがとうございます。

EDIT：

<ul class="events> 
@foreach (var events in Model) 
{ 
//absolute positioned div-s 
    <li> 
    <div class="eventActions"> 
     <button class="toggleBet">Place bet</button> 
     @Html.ActionLink("Event details", "Details", "Event", new {eventId = events.Id}, null) 
     <div class="betContent">content</div> 
    </div> 
    </li> 
</ul> 

スタイル：これまでのところ、私はそれだけに空白のソリューションを作成しました、私はそれのために

を使用したコード、それぞれのスタイルとjQueryのビューが含まれて：

.events { 
    padding: 0 0; 
    position: relative; 
    top: 0; 
    list-style: none; 
} 

.events > li { 
    position: relative; 
    margin-bottom: 10px; 
    /*display: block;*/ 
    width: 100%; 
    height: 400px; 
    top: 70px; 
} 

.events > li .eventActions { 
    position: absolute; 
    top: 355px; 
    right: 0; 
    font-size: 24px; 
} 

のjQuery：

var toggleBet = $(".toggleBet"); 
toggleBet.on("click", function() { 
    console.log("bet clicked"); 
    $(this).parent().next(".betContent").slideToggle("slow"); 
}); 

Answer 1

.betContentは.toggleBetのすぐ隣にあるので、parent()の必要はありません。以下のようにjqueryをチェックしてください。

var toggleBet = $(".toggleBet"); 
toggleBet.on("click", function() { 
    console.log("bet clicked"); 
    $(this).next(".betContent").slideToggle("slow"); 
});