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

HTML:

 


    Tab1
    Tab2
    Tab3


 
 

Tab1 content



Tab2 content



Tab3 content

SCRIPT:

 

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.