articlescroll.js

$(function() {
   
  

  // Get first element and find element within and hide
  $(".grid_3:first").find(".prev").hide();
  
  /// Get last element and find element within and hide
  $(".grid_3:last").find(".next").hide();
  

  // If the above doesn't work do
   
   /// Get the number of elements
   var count = $(".grid_3").size();

  $(".grid_3").each(function(index){
     if (index == 0) {
      $(this).find(".prev").hide();
     }

     if (index == count-1) {
      $(this).find(".next").hide();
     }

  });

  $(".grid_3").each(function(){
    
    // .next finds the next Dom element in this case it would be another grid_3 element
    var next = $(this).next();
    
    var prev = $(this).prev();
    
    // Store this current element into a var called "that" so that "this" can be used in it's own handler
    var that = this;

    // Find the .next element in this specific element and call a click function
    $(this).find('.next').click(function() {
      // Hide the current parent element the variable set above for the grid_3 element
      $(that).hide();
      
      // Fade in the next element in the dom
      next.fadeIn();
    });
    
    // Reverse that sucka
    
    $(this).find('.prev').click(function() {
      $(that).hide();
      
      prev.fadeIn();
      
    });    
    
  });  
  
});