<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .arrow_right,.arrow_left { cursor: pointer; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ var busy = $('.busy_table_div'); busy.each(function(indx, element){ $('.arrow_right', this).click( function(){ busy.hide().eq(indx+1).show() }); $('.arrow_left', this).click( function(){ busy.hide().eq(indx-1).show() }); busy.not(':first').hide(); }); }); </script> </head> <body> <div class="busy_table_div"> <div class="busy_table_main"> <span>2013</span><span class="arrow_right">></span> </div> </div> <div class="busy_table_div"> <div class="busy_table_main"> <span class="arrow_left"><</span><span>2014</span><span class="arrow_right">></span> </div> </div> <div class="busy_table_div"> <div class="busy_table_main"> <span class="arrow_left"><</span><span>2015</span> </div> </div> </body> </html>