HTML/JS-Tabs with fade in /fade out effect using jQuery

HTML:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<ul class="tab-cat-name"> <li>     <a onclick="ShowHideTab('1')" href="javascript:void(0)" class="active">Tab1</a>     <a onclick="ShowHideTab('2')" href="javascript:void(0)">Tab2</a>     <a onclick="ShowHideTab('3')" href="javascript:void(0)">Tab3</a> </li> </ul>       <div class="tab-listing" id="show_hide_1"> Tab1 content </div>   <div class="tab-listing" id="show_hide_2" style="display:none;"> Tab2 content </div>   <div class="tab-listing" id="show_hide_3" style="display:none;"> Tab3 content </div>

SCRIPT:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function ShowHideTab(current){  jQuery( ".tab-listing" ).each(function( index ) {  var toshow= index+1;   if(current==toshow){   jQuery('#show_hide_'+toshow).fadeIn(1000);   }else{   jQuery('#show_hide_'+toshow).fadeOut(1000);   }  }); }   jQuery(document).on('click', '.tab-cat-name li a', function() {    jQuery(".tab-cat-name li a").removeClass("active");    jQuery(this).addClass("active"); });

Note: Please make sure, jQuery libary has been included for the page.