How to make a div become visible on clicking a link?

My client wants the user to be able to click on a word or picture and then relevant text to appear beneath which then changes when they click on a different word or picture
I'm guessing its some kind of visible / invisible div but not quite sure how to go about implementing this.
Can anyone point me in the right direction or let me know of any issues with doing this?

Thanks

You'll need a touch of Javascript.

This tutorial on hiding and revealing content should help you out

Cheers, I had a quick look and looks like it may be helpful.
Will let you know how I get on.

Thanks

Take a look at stu nicholls site CSSPLAY for a purely css version.

Everything on that site is css, if it involves javascript he puts it on another site he created.

But just read the source code, looks fairly straightforward.

You'd have to way up compatibilty though as that only works on IE6, IE7, Firefox, Netscape, Mozilla and Safari, anyone prior to IE6 it won't work, however that's very few people (and would the javascript even work prior to IE6?)

Also some people (again very few) browse with javascript off, or javascript doesn't work through some web proxy's.

Just something to look at.

-Jake

So long as the javascript degrades gracefully, then there's no issue in using it.

I agree Bocaj, IE < 6 users are extremely low. I think it's unrealistic for any developer to compensate for these browsers (and their bugs) any more.

here are 2 that are pure css could be hacked to work how you want them, no need for javascript

http://www.cssplay.co.uk/menus/page_menu2.html

http://www.cssplay.co.uk/menus/drop_lists.html

__________________
My Recipe forum... For all your food needs

I completely misread that before, wow sorry.

i've been working with the mootools framework lately, and it has a feature like this with a smooth transitional effect (for the perfectionist).

check it out Fx.Slide

I have seen easier (not so visually appealing) versions this before, which if there's content below rather than sliding it down as the div is revealed, is a more jumpy un animated effect.

There are other frameworks available to work from, and most people would advise working from a framework is not ideal, but certainly practical.

The effects are nice, but not worth the hassle if your knowlege isn't so great on javascript, the mootools forum i found to be a horrible experience with arrogant, unhelpful users.

So don't even try it...

Just offering another alternative to look at

Thanks guys!
Having tried out a few of these methods, I found that aso186's link above was by far the easiest to implement and tailor to my needs. The only issue is it doesn't work without Javascript enabled (of course!) so am still interested in a (simple, idiot proof) way round this.

I want the user to click on a link and new content appear below (content further down to move down to make space).

Can anyone explain to me how I make an alternative for those w/o JS enabled?

Cheers!
Snappy

The alternative should be that everything is just there.

So whilst user may not have the same experience as those with Javascript enabled, the content will still be accessible. This is the key principle behind graceful degradation.

I should've checked out the link in more detail beforehand. The developer had not considered the issue.

Try tabber instead

Thanks aso186 and sorry for delay in replying.

I tried out tabber and its cool but do you think its possible to modify so that the tabs are listed vertically and space below expands to show further info on click?

I guess not, so am still looking for a method to click a link and make hidden content below become visible. Plus it needs to degrade gracefully when javascript not enabled.

Any ideas??
cheers
snappy

Hello again!

Rather than repeat myself, I wrote a post a while back about an expanding unordered list - download the expanding-menu.zip and check it out!

IMO it's pretty flexible, but if you try it out and think it could work but need some tips, just let me know!

That looks like it should do the job, thanks!! Will let you know how I get on.... cheers indeed, snappy

Have had a quick look and there is just one thing that I hope you can help me with..
is it relatively simple for the previously expanded area to close as you click the next link i.e. so that there is only one expanded area open at a time?

sorry, i'm not too hot on javascript!

thanks again