Home/ Questions/Q 6536585
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T10:30:39+00:00

I have the following code. Currently it displays 2 tabs which show 2 separate

  • 0

I have the following code.

Currently it displays 2 tabs which show 2 separate bits of data that you can switch between.

However, when each tab is “clicked”, I would like each list to fade up as it does initially on the PageLoad.

Is this possible and how do I achieve this?

<!DOCTYPE html>

<html>

<head>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<meta charset=utf-8 />

<title>Simple List FadeIn</title>

<style>

  ul#thisisthelist1 li, ul#thisisthelist2 li{

    display:none;

  }

</style>



<script type="text/javascript">

/* idTabs ~ Sean Catchpole - Version 2.2 - MIT/GPL */

(function(){var dep={"jQuery":"http://code.jquery.com/jquery-latest.min.js"};var init=function(){(function($){$.fn.idTabs=function(){var s={};for(var i=0;i<arguments.length;++i){var a=arguments[i];switch(a.constructor){case Object:$.extend(s,a);break;case Boolean:s.change=a;break;case Number:s.start=a;break;case Function:s.click=a;break;case String:if(a.charAt(0)=='.')s.selected=a;else if(a.charAt(0)=='!')s.event=a;else s.start=a;break;}}

if(typeof s['return']=="function")

s.change=s['return'];return this.each(function(){$.idTabs(this,s);});}

$.idTabs=function(tabs,options){var meta=($.metadata)?$(tabs).metadata():{};var s=$.extend({},$.idTabs.settings,meta,options);if(s.selected.charAt(0)=='.')s.selected=s.selected.substr(1);if(s.event.charAt(0)=='!')s.event=s.event.substr(1);if(s.start==null)s.start=-1;var showId=function(){if($(this).is('.'+s.selected))

return s.change;var id="#"+this.href.split('#')[1];var aList=[];var idList=[];$("a",tabs).each(function(){if(this.href.match(/#/)){aList.push(this);idList.push("#"+this.href.split('#')[1]);}});if(s.click&&!s.click.apply(this,[id,idList,tabs,s]))return s.change;for(i in aList)$(aList[i]).removeClass(s.selected);for(i in idList)$(idList[i]).hide();$(this).addClass(s.selected);$(id).show();return s.change;}

var list=$("a[href*='#']",tabs).unbind(s.event,showId).bind(s.event,showId);list.each(function(){$("#"+this.href.split('#')[1]).hide();});var test=false;if((test=list.filter('.'+s.selected)).length);else if(typeof s.start=="number"&&(test=list.eq(s.start)).length);else if(typeof s.start=="string"&&(test=list.filter("[href*='#"+s.start+"']")).length);if(test){test.removeClass(s.selected);test.trigger(s.event);}

return s;}

$.idTabs.settings={start:0,change:false,click:null,selected:".selected",event:"!click"};$.idTabs.version="2.2";$(function(){$(".idTabs").idTabs();});})(jQuery);}

var check=function(o,s){s=s.split('.');while(o&&s.length)o=o[s.shift()];return o;}

var head=document.getElementsByTagName("head")[0];var add=function(url){var s=document.createElement("script");s.type="text/javascript";s.src=url;head.appendChild(s);}

var s=document.getElementsByTagName('script');var src=s[s.length-1].src;var ok=true;for(d in dep){if(check(this,d))continue;ok=false;add(dep[d]);}if(ok)return init();add(src);})();

</script>



</head>

<body>



<div id="usual1" class="usual"> 

  <ul> 

    <li><a class="selected" href="#tab1">Tab 1</a></li> 

    <li><a href="#tab2">Tab 2</a></li> 

  </ul>



  <div id="tab1">

      <ul id="thisisthelist1">

       <li>1</li>

       <li>2</li>

       <li>3</li>  

      </ul>  

  </div>



  <div id="tab2">  

      <ul id="thisisthelist2">

       <li>4</li>

       <li>5</li>

       <li>6</li>  

      </ul>  

  </div> 

</div> 



<script type="text/javascript"> 

  $("#usual1 ul").idTabs(); 

</script>



<script>

$(document).ready(function () {



    $("ul#thisisthelist1 li").each(function(i){

      $(this).delay(i*400).fadeIn('slow');

    });



    $("ul#thisisthelist2 li").each(function(i){

      $(this).delay(i*400).fadeIn('slow');

    });    



});



</script>



</body>



</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <script type="text/javascript">
    $('.tab').click(function(event) {
        var element = $(this);
        element
            .siblings('.tab')
            .find('ul > li')
            .fadeOut();
        element
            .find('ul > li')
            .fadeIn();
    });
</script>
<body>
    <div id="tab1" class="tab">
      <ul id="thisisthelist1">
       <li>1</li>
       <li>2</li>
       <li>3</li>
      </ul>
  </div>
  <div id="tab2" class="tab">
      <ul id="thisisthelist2">
       <li>4</li>
       <li>5</li>
       <li>6</li>
      </ul>
  </div>
</body>
    • 0