CODEWITHSUNDEEP
jqueryslider
NeedH8
NeedH8

Reputation: 482

Slider navigation with connected bullets

Im trying to make slider with bullets that are connected with each other by lines. These lines are to change color, when the bullet is clicked. So the question is how to disable the next bullets if the previous are clicked again? Here is the link example.

$('label').click(function() {
  $(this).toggleClass('active').prev('.line-element').toggleClass("active");
});

Upvotes: 2

Views: 76

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

I hope this is what you want:

$('label').click(function() {
  if(!$(this).hasClass('active'))
  {
      $(this).addClass('active').prev('.line-element').addClass("active");    
  }
  $(this).closest('.lines').nextAll('.lines').find('.line-element,label').removeClass('active');
  //Just removeClass from all the next .line-element and label when previous is clicked
});

Updated Pen

Above code does not work if you directly click 3rd label. But below fix does.

$('label').click(function() {
  if(!$(this).hasClass('active'))
  {
      $(this).addClass('active').prev('.line-element').addClass("active").closest('.lines').prevAll('.lines').find('.line-element,label').addClass('active');    
  }
  $(this).closest('.lines').nextAll('.lines').find('.line-element,label').removeClass('active')
});

Updated Pen 2

Upvotes: 3

Related Questions