Home Adding a class to the next element in list on click (But stopping after the last element)

Questions

Adding a class to the next element in list on click (But stopping after the last element)

November 25, 2021

So I have created a feature where you can scroll through different dates in a list, when the user clicks on the Next or Prev buttons, the class active is removed from the current element and added to the next one.

My problem is that when you get to the very end of the list, it then breaks if you press Next – My question is can you stop the function or disable the button etc… when the end has been reached.

$('#timeline-next').click(function() {
    $('.timeline-dates div.active').removeClass('active').next('div').addClass('active');
});

$('#timeline-prev').click(function() {
    $('.timeline-dates div.active').removeClass('active').prev('div').addClass('active');
});

.timeline-dates {
  display:flex;
  border-bottom:1px solid gray;
}
.timeline-dates > div {
  position:relative;
  padding:25px;
  margin-right:30px;
}
b, span {
  display:block;
  transition:all 0.3s ease-in-out;
  color:black;
}
span {
  font-size:16px;
}
b {
  font-size:24px;
}

.timeline-dates > div::after {
  content: "";
  position: absolute;
  transition: all 0.3s ease-in-out;
  bottom: 0;
  left: unset;
  right: 0;
  height: 3px;
  width: 0%;
  background: red;
}

/* Active */
.timeline-dates > div.active b, .timeline-dates > div.active span {
  color:red
}
.timeline-dates > div.active::after {
  width: 100%;
  right: unset;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="timeline-dates">

  <div class="active">
    <span>Jan</span>
    <b>2000</b>
  </div>
  <div>
    <span>Feb</span>
    <b>2000</b>
  </div>
  <div>
    <span>Mar</span>
    <b>2000</b>
  </div>

</div>

<div class="nav">
  <button id="timeline-prev">
    PREV
  </button>
  <button id="timeline-next">
    NEXT
  </button>
</div>

JSFiddle

>Solution :

You could make a function like this:

function buttons() {
  $('#timeline-next').prop("disabled", $('.timeline-dates div.active').next("div").length == 0)
  $('#timeline-prev').prop("disabled", $('.timeline-dates div.active').prev("div").length == 0)
}

And call it from each of your click event.

Demo

$('#timeline-next').click(function() {
  $('.timeline-dates div.active').removeClass('active').next('div').addClass('active');
  buttons()
});

$('#timeline-prev').click(function() {
  $('.timeline-dates div.active').removeClass('active').prev('div').addClass('active');
  buttons()
});
buttons();
function buttons() {
  $('#timeline-next').prop("disabled", $('.timeline-dates div.active').next("div").length == 0)
  $('#timeline-prev').prop("disabled", $('.timeline-dates div.active').prev("div").length == 0)
}

.timeline-dates {
  display: flex;
  border-bottom: 1px solid gray;
}

.timeline-dates>div {
  position: relative;
  padding: 25px;
  margin-right: 30px;
}

b,
span {
  display: block;
  transition: all 0.3s ease-in-out;
  color: black;
}

span {
  font-size: 16px;
}

b {
  font-size: 24px;
}

.timeline-dates>div::after {
  content: "";
  position: absolute;
  transition: all 0.3s ease-in-out;
  bottom: 0;
  left: unset;
  right: 0;
  height: 3px;
  width: 0%;
  background: red;
}


/* Active */

.timeline-dates>div.active b,
.timeline-dates>div.active span {
  color: red
}

.timeline-dates>div.active::after {
  width: 100%;
  right: unset;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="timeline-dates">

  <div class="active">
    <span>Jan</span>
    <b>2000</b>
  </div>
  <div>
    <span>Feb</span>
    <b>2000</b>
  </div>
  <div>
    <span>Mar</span>
    <b>2000</b>
  </div>

</div>

<div class="nav">
  <button id="timeline-prev">
    PREV
  </button>
  <button id="timeline-next">
    NEXT
  </button>
</div>