Creating an interactive tour for a website I'm using grumble to create an interactive tour for a website I'm working on (I'm aware there is a plugin called crumble that does this but I want to have full control of the functionality).

Basically, I initialise 6 grumbles (this is the amount of tour bubbles I need), then hide the last 5 and then attach each click handler separately. In each click handler I hide the one that is clicked and show the next one.

$(document).ready(function() {

 // First grumble
 $('#someID').grumble({
  text: 'This is a short tour, click to continue', 
  angle: 130, 
  distance: 10,
  type: 'firstGrumble '
 });

 // Second grumble
 $('#someOtherID').grumble({
  text: 'This is some tour text',
  angle: 30, 
  distance: 230,
  type: 'secondGrumble '
 });

 // Third grumble
  $('#someOtherOtherID').grumble({
  text: 'This is some more tour text',
  angle: 5, 
  distance: 30,
  type: 'thirdGrumble '
 });

 // Fourth grumble
 $('#anotherID').grumble({
  text: 'This is another bit of tour text',
  angle: 60, 
  distance: 30,
  type: 'fourthGrumble '
 });

 // Fifth grumble
 $('#yetAnotherID').grumble({
  text: 'This is also another bit of tour text',
  distance: 30,
  type: 'fifthGrumble '
 });

 // Sixth grumble
 $('#andAnotherID').grumble({
  text: 'This is the end of the tour',
  angle: 300, 
  distance: 30,
  type: 'sixthGrumble '
 });

 // Hide the freshly created gumbles
 $('.secondGrumble').hide();
 $('.secondGrumble + div').hide();
 $('.thirdGrumble').hide();
 $('.thirdGrumble + div').hide();
 $('.fourthGrumble').hide();
 $('.fourthGrumble + div').hide();
 $('.fifthGrumble').hide();
 $('.fifthGrumble + div').hide();
 $('.sixthGrumble').hide();
 $('.sixthGrumble + div').hide();

 // Click handler for first grumble
 $(document).on("click", '.firstGrumble + div', function() {
  $('.firstGrumble').hide();
  $('.firstGrumble + div').hide();
  $('.secondGrumble').show();
  $('.secondGrumble + div').show();
 });

 // Click handler for second grumble
 $(document).on("click", '.secondGrumble + div', function() {
  $('.secondGrumble').hide();
  $('.secondGrumble + div').hide();
  $('.thirdGrumble').show();
  $('.thirdGrumble + div').show();
 });

 // Click handler for third grumble
 $(document).on("click", '.thirdGrumble + div', function() {
  $('.thirdGrumble').hide();
  $('.thirdGrumble + div').hide();
  $('.fourthGrumble').show();
  $('.fourthGrumble + div').show();
 });

 // Click handler for fourth grumble
 $(document).on("click", '.fourthGrumble + div', function() {
  $('.fourthGrumble').hide();
  $('.fourthGrumble + div').hide();
  $('.fifthGrumble').show();
  $('.fifthGrumble + div').show();
 });

 // Click handler for fifth grumble
 $(document).on("click", '.fifthGrumble + div', function() {
  $('.fifthGrumble').hide();
  $('.fifthGrumble + div').hide();
  $('.sixthGrumble').show();
  $('.sixthGrumble + div').show();
 });

 // Click handler for sixth grumble
 $(document).on("click", '.sixthGrumble + div', function() {
  $('.sixthGrumble').hide();
  $('.sixthGrumble + div').hide();
 });

});


I want to know a way to make this code more DRY.  I'm thinking some form of an each statement and a counter to create the 6 classes, but I could be wrong.
I would go for an approach as follows:

&lt;div id="grumble-1" data-grumble-text="my text" data-grumble-angle="60" data-grumble-distance="30" data-grumble-next="grumble-2"&gt;clickme&lt;/div&gt;

&lt;div id="grumble-2" data-grumble-text="my text 2" data-grumble-angle="30" data-grumble-distance="10"&gt;clickme&lt;/div&gt;


then some javascript fun:

var GrumblingSteps = (function(){
    var grumbleMagic = function($grumbleTarget) {
        //create grumble
        $grumbleTarget.grumble({
            text : $grumbleTarget.data('grumble-text'),
            angle : $grumbleTarget.data('grumble-angle'),
            distance : $grumbleTarget.data('grumble-distance')
        });
        //add click handler to the next in line if any
        if ( $grumbleTarget.data('grumble-next') ) {
            $nextGrumble = $('#'+$grumbleTarget.data('grumble-next'));
            $nextGrumble.on('click', function() {
                $grumbleTarget.grumble('hide');
                grumbleMagic($(this));
            });
        }
    }

    return function(firstGrumble) {
        var $firstGrumble = $(firstGrumble);
        grumbleMagic($firstGrumble);
    }
})();


Someone might be able to change this to a jQuery plugin or so. But for now you use it as follows:

GrumblingSteps('#grumble-1');



  It might have some errors in it since I coded this directly inside this comment box ;)