Titles, Script and Text - Help Please

Hi, I have a question and maybe someone can help.

I'm putting a new page on my site. I've seen on a few sites that have like a few titles (or headers) in the main body of text. The page only has titles. When you click on one of the titles, the headers underneath move down and the text pertaining to the header appears in a box underneath the title. Similarly, when you click on another title, the previous text vanishes and the new text appears under the header.

Am I making sense, if not I'll try find one of the sites showing this.

What I'm wondering is if there is free text/script downloadable that allows this as I really like it.

Thanks for any help

I believe it is usually achieved using javascript that alters the CSS display attribute of the container the text in question is in.

Here's an example tutorial with all the code you should need to get started in the right direction:
http://www.cssnewbie.com/showhide-content-css-javasc...


Always make sure to check how the page functions without javascript enabled as some people disable it and you can potentially make the content of your page effectively inaccessible to them.

i think what you're after is an accordion

easiest way to do it is to get yourself a copy of jquery and bind a function on the header to hide/show the container underneath, or yuo could go the whole hog and use the full monty accordion object in the jquery ui library

i know some people think using a javascript framework is a little heavy-handed but personally, I think it's great - saves a lot of time and typically works in all browsers

In reply to a post by smiffy12:

Hi, I have a question and maybe someone can help.

I'm putting a new page on my site. I've seen on a few sites that have like a few titles (or headers) in the main body of text. The page only has titles. When you click on one of the titles, the headers underneath move down and the text pertaining to the header appears in a box underneath the title. Similarly, when you click on another title, the previous text vanishes and the new text appears under the header.

Am I making sense, if not I'll try find one of the sites showing this.

What I'm wondering is if there is free text/script downloadable that allows this as I really like it.

Thanks for any help

http://www.downloadjavascripts.com/Vertical_Accordio...

giant list of accordions ..

Minor note be careful not to mix javascript frame works (of course i have totally ignored that and used spry, mootools and jquery on one site - opps )

In reply to a post by jonathanHodd:

i know some people think using a javascript framework is a little heavy-handed but personally, I think it's great - saves a lot of time and typically works in all browsers

It only works in all browser when javascript is enabled. Quite a few people disable it for security reasons.

Of course and web programmer worth his salt makes sure that the page degrades gracefully and still provides the necessary content.

"web programmer worth his salt" is a bit of a sweeping generalisation; if you were to spend time making sure everything always degraded gracefully at our place you wouldn't last long