[Case]

Our graphic designer has come up with a page which has the following feature...

A section with links & text. When you click on a particular link the text next to it changes depending on which link you have clicked.

I'm know I can do this with a show/hide javascript funtion. I'm a bit concerned about the SEO implications of using js though.

Any alternatives? Is it possible with CSS... "Display:none;" till the link is clicked maybe?

[tommy]

You would need to use JavaScript so you can initiate the onclick function then you have to use the DOM to change the display to none.

eg.

 document.getElementById("id_name").style.display = "none";

[yorkshiresource]

I use a modified version of a small js script called mootabs for this type of thing - it will work by either requesting the new content via ajax or modifying the dom. The benefit of the latter is that the whole page content is present in the source on page load (obviously better for your seo)

Apparently I can't post links so you'll have to google mootabs.

It uses the mootools library which provides really powerful tools for acessing and modifying the dom with js and css selectors - I use it all the time.

[tommy]

http://www.mootools.net/ - thats pretty cool.

I tend to use more of jQuery myself, I tried the yahoo YUI but just couldn't get to grips with it.

[Case]

Thanks guys. I can't really find something that does what I want it too though. Unless I'm just looking at the wrong section. Also, I've decided that I only want the new div's to show on a mouseover. The links will take you to a new page.

Here, this might help show you what I'm trying to achieve...



...can't beat a good diagram.

All the text should display in the source code for seo purposes.

Cheers for any advice.

[tommy]

something like this you mean?

http://www.codylindley.com/blogstuff/js/jtip/ - mouse over the links and you will see what i mean.

[Case]

Yep, something like that.

The div needs to be populated with the first set of text (so the page doesn't look blank in that div) and then you can scroll over the others to see them.

I'll have a play with that.

Cheers Tommy.

[yorkshiresource]

Hi,

I think this achieves what you are after. It uses only the standard mootabs file but just change "click" to "mouseover" on line 33. Hope it helps...

www.yorkshiresource.co.uk/test.php

Cheers

Richard

[Case]

Perfect. Cheers Richard.

[forums]

How about loading all the links in, then using JS to hide them? That way the search engines will see all the links but your users wont.