Replacing contents in <div> with fadeIn/fadeOut effect

[xmsc]

Hello there phpfreaks community!

 

Well, I've got a problem and broke my head all over it last night. I couldn't solve it.

 

I got a div named "content" and in this div, there are 4 more divs.

What I want to do is to fadeIn and fadeOut the divs I do not need with Javascript/JQuery.

 

So for example I got a menu having the links: homepage, serverpage, accountpage, supportpage.

When I click on serverpage, it should fadeOut all the divs (homepage, accountpage, supportpage) except serverpage div.

 

To the code:

 

Thats my menu, if I click on one of those rectangle coordinates it should run a javascript to do the desired action described above.

<map name="Navigation" id="Navigation">
<area shape="rect" coords="50,22,125,43" href="#homepage" alt="" />
<area shape="rect" coords="169,21,396,42" href="#serverpage" alt="" />
<area shape="rect" coords="419,21,689,44" href="#accountpage" alt="" />
<area shape="rect" coords="725,19,856,46" href="#supportpage" alt="" />
</map>
<img src="images/navibar.png" width="899" height="61" border="0" alt="" title="" usemap="#Navigation" />

 

I guess I have to set the href's to href="return homepage();" to start the function I need. Am I right?

 

Thats how my body looks:

<div id="content">
<div id="homepage">
	home stuff here ...
</div>
<div id="serverpage">
	server stuff here ...
</div>
<div id="accountpage">
	account stuff here ...
</div>
<div id="supportpage">
	support stuff here ...
</div>
</div>

 

 

The stuff I tried lastnight was something like this:

<script type="text/javascript">
// function if I click serverpage link
function serverpage() {
//I clicked the link -> check if its visible, if not run function and make it visible
if(document.getElementByID('serverpage').style.visibility=='hidden') {
  document.getElementByID('homepage').style.visibility='hidden';
  document.getElementByID('serverpage').style.visibility='visible';
  document.getElementByID('accountpage').style.visibility='hidden';
  document.getElementByID('supportpage').style.visibility='hidden';
}
} 
</script>

 

But It did not work. I do have no idea what I made wrong, any help is greatly appreciated.

[phpsycho]

use Jquery, much better.

fadeIn("slow"); fadeOut("slow");

 

$('#id').click(function() {
//do stuff like fadeout all others but the clicked on div
});

[xmsc]

Alright, so like this?

 

<area shape="rect" coords="169,21,396,42" href="#serverpage" id="server" alt="" />

 

<script type="text/javascript">
$('#server').click(function() {
	$("#accountpage").fadeOut("slow);
	$("#supportpage").fadeOut("slow");
	$("#homepage").fadeOut("slow");
	$("#serverpage").fadeIn("slow");
});
</script>

[phpsycho]

yup and in your css make sure all of those are hidden and only show links to fade them in and out.

[xmsc]

Alright thanks a lot, it worked out.

[phpsycho]

You're welcome.

be sure to mark the topic as solved.

bottom left of the page.