Help - Search - Members - Calendar
Full Version: How could I do text that appears/disappears by clicking links?
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Jessica R
Hello!

I am thinking of doing a page that has a bunch of short bios (a paragraph or two) of people (about 20 people) and here's how I would like it to work:

Original view of the page is a list of the names and each name is a link.

When a name link is clicked, the bio text for that name appears below the link and the other links on the list of names move up or down to accommodate the space the bio text uses.

When a second name link is clicked, the first bio text would disappear and the new bio text would show, and so on.

The way I'm doing it now is that I have a separate webpage for each person and the name link calls up that page for that particular person. This is not a good way to do it because if I have to change any of the links or add a link, I have to change it or add it on all twenty bio pages.

So, I'm wondering if there is a way to do it so all the bios are on one page, but just hidden until called for either by a java script, or css visibility, or maybe something else that would be best to make it work how I want to.

Any ideas to get me pointed in the right direction would be very much appreciated.

Thank you!

P.S. Here is the webpage of how it works now to give you a better idea of what I'm trying to do:
http://aaidacapulco.com/presenters.html
Darin McGrew
QUOTE
This is not a good way to do it because if I have to change any of the links or add a link, I have to change it or add it on all twenty bio pages.
You don't need to update all those pages by hand. See the FAQ entry How do I include one file in another?.

But you can use JavaScript and/or CSS to hide all but one of the entries. If you want the entries to be revealed by hovering over the name, then you can use either JavaScript or CSS. If you want the entries to be revealed by clicking, the way people expect to use links, then you'll need to use JavaScript.

Note that if you use JavaScript to reveal entries, that you should also use JavaScript to hide them. If you use CSS to hide them, and JavaScript to reveal them, then those who browse with CSS enabled and JavaScript disabled/unavailable will have no way to reveal the hidden entries.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.