HTML Gurus: How can I have a drop down table?

Factual Questions
1

I’ve seen something similar to the effect I want on some torrent sites. In short, I want to have a table with some brief descriptions in vertical each cell. However, I would love it if my users could click on that brief description to cause a much longer description to slide out from below, thereby pushing the rest of the table’s content down.

Is this possible?

2

This sounds like it’s a DHTML technique - clicking on the anchor (or button, etcetera) fires off javascript that makes an invisible block of text visible. I don’t have a code sample available offhand, but working with CSS styles is probably the easiest way to go. Maybe that tip will be enough to help you find samples elsewhere on the net, or somebody else will be along with a more thorough answer.

Good luck!

3

I have a javascript that will do that. It’s the kind of thing where there’s a little link that says “more” I can PM it to you, or even better find you a link to a tutorial, but that’s at the office. It allows you to “show” and “hide” much longer blocks of text. (like if you had a product description you wanted to expand).

4

Either way would be sweet – thanks!

5

Oh, here’s two of the examples:

http://support.internetconnection.net/CODE_LIBRARY/Javascript_Collapse_Expand.shtml

http://support.internetconnection.net/CODE_LIBRARY/Javascript_Show_Hide.shtml

The former has “try me” links (small at the top as examples) that expand and collapse longer blocks of text. The second allows you to choose which chunks of text you want to see below it. They are very easy to use with < div > tags.

6

Here’s a free DHTML menu builder I use.

Give it a try.

7

Thanks for the great responses guys; your links seem to be pretty much what I described.

Except for one thing, do you know of any that cause it to slide down, smoothly? If not, the ones you guys provided will certainly work.

Thanks again.

8

You could try ypSlideOutMenus , you’ll just have to tweak it to use onmousedown rather than onmouseover to activate… or if it’s not quite what you’re after you can have a look at how it achieves its smooth opening animation.

9

There is an Ajax type of script or 50 that may work for you.

One of the very first to exploit this is Open Rico’s accordion. MooTools offers it as part of a high set of Ajax tools. Then again, you can go lean and mean and accomplish almost the same with a very simple code called EasyToggle. All of these work well playing hide and seek with page content as well as menus. However, there is a caveat with menus in that Ajax/Javascript in menus is a user dependency with a critical aspect in site design, i.e., site navigation. Unless you can ensure the script will degrade gracefully, you run a serious risk of web users getting locked out of your site, or even locked in, when the navigation burps and fails.

FWIW, if you really do it, do it as part of an overall design concept for your site in that it has a genuine need to be used. If you do it because it’s cool, you are too late to the game and your site will suffer as a result.