Creating a toggle div on a button click in a foreach loop with absolute and relative positioning using jQuery

I created a view which has a foreach loop which displays every item in a box using absolute and relative positioning, thus creating a list.

I want to create a button and wire it up to jQuery so that on click it would push the next list item down temporarily while it shows the div which includes the information I want to show (and hide it when pressed again). Since the list items have fixed height, I could always just leave whitespace for the div but if possible, I would like it the former way.

Here's a picture, which hopefully helps clearing up my goals: https://i.imgur.com/pkruI6s.png The hr-s belong to the list items below them, so the one you see should be the first thing pushed down, along with the rest of the page.

Any help is greatly appreciated!

EDIT: so far I've only created the whitespace solution to it, I included the code, the respective styles and the jQuery I used for it

The view:

<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>

The styles:

.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;
}

The jQuery:

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

1 answer

  • answered 2017-10-11 10:05 RaJesh RiJo

    There is no need of parent(), because .betContent is very next to .toggleBet. Check your jquery as below.

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