Javascript FadeIn List Items - Simple issue


I’m really not great with Javascript.

Currently the code below animates each list item loading when the page loads, however I’d like the list items to animate each time a tab is clicked.

I have the following code. What do I change to the code below to achieve the above?

<!DOCTYPE html>
<script class="jsbin" src=""></script>
<meta charset=utf-8 />
<title>Simple List FadeIn</title>
  ul#thisisthelist1 li, ul#thisisthelist2 li{

<script type="text/javascript">
/* idTabs ~ Sean Catchpole - Version 2.2 - MIT/GPL */
(function(){var dep={"jQuery":""};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;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(!,[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;}
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);})();


<div id="usual1" class="usual"> 
    <li><a class="selected" href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
  <div id="tab1">
	  <ul id="thisisthelist1">
  <div id="tab2">  
	  <ul id="thisisthelist2">
<script type="text/javascript"> 
  $("#usual1 ul").idTabs(); 

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





I’m really not sure where to begin and would love some guidance with this.

Many thanks for any pointers.

Got an answer for Q.1

<a href="#" style="position:absolute;top:60px;left:0px">Tab 1</a>
<a href="#" style="position:absolute;top:60px;left:120px">Tab 2</a>

It’s a bit of a dirty fix so I’m off for a bath of sheer shame scrubbing proportions :slight_smile:

I’m still totally lost for Q.2 so any pointers would mean a lot.

Thank you

Hi SgtLegend.

I just have a couple more queries if it’s ok.

Using this as the example…

  1. How do I display my Tabs (Tab 1 and Tab 2) inline (next to one another) instead of underneath one another…aaand still keep the UL’s appearing underneath?

  2. Is there a way if I visit the site it would open Tab 1 automatically?

Many thanks again for all your help.

Have a look at the following jsFiddle and make sure its the effect you desire, if it is study the code and let me know if you don’t understand something.

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

Wow!! Many thanks, SgtLegend.

The only slight difference I was hoping for is that only one tab can display at the one time. Is this possible? So if tab1 is open and I click tab2, tab1 would close and tab2 would then open.

I really owe you a virtual beer. What’s your poison? :slight_smile:

Oh and secondly, is there a way I can hyperlink to “tab2” so if a user clicks on it from (say) an email, that tab would open initially as opposed to the default tab1?

No problem, as for the second part of your question yes it’s very possible to do that. I didn’t have a chance to fully test the code because I’m heading off to bed but it should work fine.

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

Fantastic - Many, many thanks!! This is plenty to get me started :slight_smile:

I may be back, but I really appreciate your efforts. Thanks again