What is a very good way to show and move page content with transitions using javascript?

vdanias used Ask the Experts™
I have a single page and a menu.

Menu: Option 1 | Option 2 | Option 3

These 3 options correspond to HTML content in the page (divs or list).

I am trying to find a good JS library/script (preferably based on prototype but not a must) that will hide the content thats not selected and upon selection of the appropriate option it will show up using some kind of a transition (slide-in, fade-in, etc).

So this is something like a carousel but the content will have different heights and widths and should be able to be loaded dynamically, so no point manually setting up the dimensions in a css file.

I am sure I could make this but I am also sure there is something better out there that will take 5 mins to setup.

Any good ideas? I hope the above was clear enough :D

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Is this what you want?


It's not exactly what i am looking for. I don t want it look like tabs and I def want transitions and flexibility on how the next option will be selected (through a custom made menu, a drop down list or even a timer). There are carousels that do this and accept any type of content in them but, I haven't found one that is flexible with the different sizes of the content.

You can set visibility of div to 'visible' or 'hidden'.

See this: http://www.webmasterworld.com/forum91/441.htm

You can call these simple functions (attached) with onclick event handler as given:

onclick="showstuff('id_to_show'); hidestuff('id_to_hide');"

function showstuff(boxid){

function hidestuff(boxid){

Open in new window

This also does similar trick with some transition effect.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial