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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

JSFiddle

CodePudding user response：

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

Show code snippet

$('#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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Change your js like below,

$('#timeline-next').click(function() {
   if ($('.timeline-dates div.active').next('div').length != 0) {
       $('.timeline-dates div.active').removeClass('active').next('div').addClass('active');
   }
});

$('#timeline-prev').click(function() {
   if ($('.timeline-dates div.active').prev('div').length != 0) {
       $('.timeline-dates div.active').removeClass('active').prev('div').addClass('active');
   }
});

I hope it will work for you.