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.
P.S. Here is the webpage of how it works now to give you a better idea of what I'm trying to do: