Thursday, January 1, 2015

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

Tabs with fade in /fade out effect using jQuery


<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;">
 Tab1 content
 </div>
 <div class="tab-listing" id="show_hide_3" style="display:none;">
 Tab1 content
 </div>

   
   
<script type="text/javascript">
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);
            }
        });
}   
</script>   

<script type="text/javascript">
   jQuery(document).on('click', '.tab-cat-name li a', function() {
       jQuery(".tab-cat-name li a").removeClass("active");
       jQuery(this).addClass("active");
   });
</script>

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

Njoy the day :) :)

1 comment :

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete