onClick Cycle Through Multiple Sets of DIVs?

Question

I'm very new to exploring JS, but I was fiddling with the code from this thread to come up with this: jsfiddle

(function(){

var $hints = $('.hint');
var i = 0;

$('.hint').on('click', function(){
i = (i + 1) % $hints.length;
$hints.hide().eq(i).show();
});


})();

div.hint.hidden, div.hint2.hidden, div.hint3.hidden {display:none;}
div.hint-box, div.hint2-box, div.hint3-box{
    position:relative;
    padding:20px 40px 20px;
    background:grey;
    border:1px solid #CCCCCC;
    color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hint-box">
    <div class="hint">This is the first example...</div>
    <div class="hint hidden">This is the second example...</div>
    <div class="hint hidden">This is the third example...</div>    
    </div>
    <div class="hint2-box">
    <div class="hint2">This is the first example...</div>
    <div class="hint2 hidden">This is the second example...</div>
    <div class="hint2 hidden">This is the third example...</div>    
    </div>
    <div class="hint3-box">
    <div class="hint3">This is the first example...</div>
    <div class="hint3 hidden">This is the second example...</div>
    <div class="hint3 hidden">This is the third example...</div>    
    </div>

The first div set is cycling how I'd want it to. I figure there's a way to get the other two to work by copying the JS and replacing the classes (jsfiddle here). Is there a way to write the JS where I won't need to write new JS for every cycling class groups?

Answer 1

You can actually use jQuery DOM traversing methods to achieve this easily:

$(function(){
  $('.hint').on('click', function(){
    var $hint = $(this);
    //if next element is present
    if($hint.next().length > 0){
      $hint.next().show().siblings().hide();
    }
    //if you do not want to show the first message again then just delete the else part written below
    else{
      //if next element is not present then startover from first
      $hint.siblings().first().show().siblings().hide();
    }
  });
});

$(function(){
  $('.hint').on('click', function(){
    var $hint = $(this);
    //if next element is present
    if($hint.next().length > 0){
      $hint.next().show().siblings().hide();
    }
    else{
      //if next element is not present then startover from first
      $hint.siblings().first().show().siblings().hide();
    }
  });
});

div.hint.hidden, div.hint2.hidden, div.hint3.hidden {display:none;}
div.hint-box, div.hint2-box, div.hint3-box{
    position:relative;
    padding:20px 40px 20px;
    background:grey;
    border:1px solid #CCCCCC;
    color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hint-box">
    <div class="hint">This is the first example...</div>
    <div class="hint hidden">This is the second example...</div>
    <div class="hint hidden">This is the third example...</div>    
    </div>
    <div class="hint-box">
    <div class="hint">This is the first example...</div>
    <div class="hint hidden">This is the second example...</div>
    <div class="hint hidden">This is the third example...</div>    
    </div>
    <div class="hint-box">
    <div class="hint">This is the first example...</div>
    <div class="hint hidden">This is the second example...</div>
    <div class="hint hidden">This is the third example...</div>    
    </div>