Main > Everything Else

HTML help - how do I make a page that shows more info when a question is clicked

(1/1)

quarterback:
I can't find an example right now, but like a FAQ page that lists a bunch of questions but when you click on a question, the answer appears below it.

Not a page where you 'jump' down the page to the answer, but where the answer just appears, rippling the other questions lower on the page.

So you start off seeing something like this


--- Quote ----Q1- What is MAME?
-Q2- Where can I download the most recent version?
-Q3- Are ROMs legal?
-Q4- How many games does MAME support?
--- End quote ---

But when you click question #2, you see something like this:


--- Quote ----Q1- What is MAME?
-Q2- Where can I download the most recent version?

       A: Many versions of the mame executable can be found at http://www.mame.net/downmain.html

-Q3- Are ROMs legal?
-Q4- How many games does MAME support?
--- End quote ---


I'm going to see if I can find an example and maybe just borrow their HTML, but my guess is that it's some kind of php script or something.   Anybody knew a way to do this or a possible download?
Thanks

quarterback:
Or, alternately, a FAQ like this one:

http://www.google.com/support/webmasters/

or this one

http://www.myspace.com/index.cfm?fuseaction=misc.faq

Where you click a question, go to a new page but there's a little navigation 'bar' at the top like this:

--- Quote ---Skip Navigation LinksHelp with FAQ > Artist/Band Questions > How do I become a featured artist?
--- End quote ---


JamIt:
Here's a snipet I've used in the past.  It probably only works with IE, but I hope it helps get you started.
--JamIt


--- Code: ---<html>
<head>
<SCRIPT type=text/javascript>
function expandColapse(sH,sD)
{
var h, d;
var s;
//h = document.getElementById('headerrow' + sH);
for(i=1; i <= sD; i++)
 { 
try
{
  d = document.getElementById('datarow' + sH + '.' + i);
  if (d.style.display == 'none')
  {
    //h.src = 'test_files/minus.gif';
    d.style.display = 'block';
  }
  else
  {
    //h.src = 'test_files/plus.gif';
    d.style.display = 'none';
  }
}
catch(e)
{
}
 }
}
</SCRIPT>
</head>
<body>
<table>
<tr><td valign="bottom"><span title="spn1"><a href="javascript:expandColapse(1, 1);">Q1</a></span></td></tr>
<tr id="datarow1.1" style="display:none"><td width="1"></td><td valign="top" nowrap colspan="1">A1</a></td></tr>
<tr><td valign="bottom"><span title="spn2"><a href="javascript:expandColapse(2, 1);">Q2</a></span></td></tr>
<tr id="datarow2.1" style="display:none"><td width="1"></td><td valign="top" nowrap colspan="1">A2</a></td></tr>
</table>
</body>
</html>

--- End code ---

quarterback:

--- Quote from: JamIt on January 12, 2007, 11:24:31 am ---Here's a snipet I've used in the past.  It probably only works with IE, but I hope it helps get you started.

--- End quote ---

Thanks a bunch JamIt.  It got me thinking the the right direction (which is javascript, which wasn't where I was thinking :))  Looks like I'll be good to go.

Thanks again.

Navigation

[0] Message Index

Go to full version