Help,How do they do this?

E

Egarcia

I basically need to create a menu with different categorys and when a
particular category is click it will bring the corresponding info. Almost
like a Question & Answer type of list, but I want all the answer on one page,
when a particular question is clicked I want the corresponding answer to
come up without changing pages.
I hope I made myself clear, I know it's not a great description.
 
T

Trevor L.

Egarcia said:
I basically need to create a menu with different categorys and when a
particular category is click it will bring the corresponding info.
Almost like a Question & Answer type of list, but I want all the
answer on one page, when a particular question is clicked I want the
corresponding answer to come up without changing pages.
I hope I made myself clear, I know it's not a great description.
Click to expand...

Here is a rudimentary piece of code that does it.

Click on part1 and you get part2. Click again on part 2 and it disappears

It really should be tidied up so that the code to click on is underlined, and part1 doesn't move when clicked, but that is just
cosmetic

<html>
<head>
<style type="text/css">
td {border:1px black solid;}
</style>
<script type="text/javascript">
function hideit(elid,hide)
{
if (hide != "show")
document.getElementById(elid).style.display="none"
else
document.getElementById(elid).style.display="block"
}
</script>
</head>
<body>
<table>
<tr>
<td id="part1" border="10px" width="30%" onClick="hideit('part2','show')">
This is part 1 of the code
</td>
<td id="part2" border="1px" width="70%" style="display:none" onclick="hideit('part2','hide')">
This is part 2 of the code<br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
</td>
</tr>
</table>
</body>
</html>
 
T

Trevor L.

Here is another version with a button to click.

function showhide(elmnt)
{
var T = document.getElementById(elmnt).style
T.display = (T.display == 'none') ? 'block' : 'none'
}
</script>
</head>
<body>
<table border>
<tr>
<td>Question goes here<input type="button" value="Show/Hide Answer" onclick="showhide('cell2');"></td>
<td id="cell2" style="display:none">Answer goes here</td>
</tr>
</table>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Getting Radio Buttons to work, that are inserted via AutoText 0
Calculate the median value before a specified list 0
Working on birthday "book" for my wife and having layout/editing trouble 0
How to make repeating drop-down lists? 2
Error message: "Word found unreadable content in FILENAME. Do you want to recover the contents of this document? 0
Page numbering with Merged Document and IF statements 1
Linking text to photos 0
Duplicate hashtags in OneNote 0

Top