Avatar of hibbsusan
hibbsusan
 asked on

change div content fade

i'm looking for a way to have a three or four buttons that control the content of a div with a jquery fade-in effect. I can't seem to find anything exactly like that through google. Just lots of image replacement code.

Can anyone help me find a way to have the content of a div change to/from various images and text when a button is clicked?

Thanks for your help!
JavaScriptHTMLWeb Development

Avatar of undefined
Last Comment
Pieter Marais

8/22/2022 - Mon
leakim971

hibbsusan

ASKER
I found this code, but am having trouble making it swap content onclick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


</head>

<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
 
<div id="tabs"><ul style="list-style:none">
     <li style="float:left;width:70px"> First</li>
	 <li style="float:left;width:70px"> Second </li>
	 <li style="float:left;width:70px"> Third </li>
	 <li style="float:left;width:70px"> Fourth </li>
	 <li style="float:left;width:70px"> Fifth </li>
   </ul>
   <ul style="clear:both">
   <div style="position:absolute"> first content</div>
   <div style="position:absolute"> second content</div>
   <div style="position:absolute"> third content</div>
   <div style="position:absolute"> fourth content</div>
   <div style="position:absolute"> fifth content</div>
   </ul></div>
 
 <script type="text/javascript">
 $('#tabs div').css({display:"none"});
 var li=document.getElementById('tabs').firstChild.getElementsByTagName('li');
 var div=document.getElementById('tabs').lastChild.getElementsByTagName('div');
 var actual;
 for (var i=0;i<li.length;i++)
 $(li[i]).bind("click",function(i)
 {	return function()
	{
    $(div[i]).fadeIn(1000);
	}
 }(i));
 for (var i=0;i<li.length;i++)
 $(li[i]).bind("mouseout",function(i)
 {return function()
	{
    $(div[i]).fadeOut(1000);
	}
 }(i));
 
 
 </script>
</body>
</html>

Open in new window


has anybody got any suggestion?
Thanks!
hibbsusan

ASKER
That is to say, I changed the mouseover on line 35 to a click, but it still fades out when i mouseout.

here is a functional copy: http://jsfiddle.net/Q8Ybw/

Thanks
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER CERTIFIED SOLUTION
Pieter Marais

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question