You could probably come up with a dozen ways of doing it. You could have
different divs all loaded but hidden, then hide and show them as needed,
which would be a very different animation than you have now. Or you could
use ajax to load the different DIV contents (which might be nice for site
organization) and then either load them into the hidden divs or just store
them in variables for swapping in and out.
If you need fancy animations, you are going to want to do something like
hide (or fade out) the old div, and then have some custom animation that
causes the new div to appear in the way you want it to appear.
If you are aiming for search engine optimization, you probably don't want to
rely on AJAX to load the content. You probably want to just have three (or
more) divs that start hidden. Each has a unique ID. You could even store a
reference to a unique 'animateShow' function attached to each div.
<a class="leftMenu" target="one">One</a>
<a class="leftMenu" target="two">Two</a>
<a class="leftMenu" target="three">Three</a>
...
<div class="content hidden" id="one">One's content</div>
<div class="content hidden" id="two">Two's content</div>
<div class="content hidden" id="three">Three's content</div>
Assuming each div needs a custom 'show' animation, you could do this:
$('#one').data('animateShow',showOne);
$('#two').data('animateShow',showTwo);
$('#three').data('animateShow',showThree);
Then to hook it all up:
var activeContent = 'one';
$('a.leftMenu').click(function(ev){
var targetId = $(ev.target).attr('target');
if ( targetId != activeContent ) {
var targetDiv = $('#'+targetId)[0];
if ( targetDiv != null ) {
$('#' + activeContent ).fadeOut('fast');
var animation = $(targetDiv).data('animateShow');
if ( animation ) animation( targetDiv )
else $(targetDiv).fadeIn('fast');
activeContent = targetId;
}
}
return false;
});
Hope that gets you down the road towards where you want to be.
On Fri, Jan 22, 2010 at 3:31 PM, Eugene Hourany <ehour...@gmail.com> wrote:
> Hi everyone,
>
> I'm using jQuery to power all the nice animation effects and such. But I'm
> also using it to make my DOM life easier too.
>
> With that, here's what I want to do:
>
> When you click on a link (in this case, an <a>), the <div> to its right is
> replaced with new content. I tried to do this earlier with an <iframe> but I
> think it's overkill for what I want.
>
> I'm working on this page to get a "non-flash" version running because of
> SEO compliance: http://www.theportalgrp.com. So, for example, clicking on
> "services" will bring up the services div on the right. Would using jQuery
> objects that contain the <div>s be better, and then do a content replace?
>
> And I don't know if .toggle() is better, or .click() or which function to
> do what I want.
>
> Any help would be greatly appreciated.
>
> Thanks!
>
> Eugene
>
--
John Arrowwood
John (at) Irie (dash) Inc (dot) com
John (at) Arrowwood Photography (dot) com
John (at) Hanlons Razor (dot) com
--
http://www.irie-inc.com/
http://arrowwood.blogspot.com/
