Microsoft FAQ

  • Thread starter Thread starter Guest
  • Start date Start date
The answer would depend upon your skill set.

To accomplish requires JavaScript and CSS.

For the question you'll need to include a JavaScript onclick event handler that sets the display style of the div that contains the
question.

<a href="#" onclick="show('Answer1')" >

The JavaScript function show is where the real work is accomplished.

<script>
function show(elementID) {
ele = document.getElementById(elementID);
if (ele.style.display == 'none') {
ele.style.display = 'block';
} else {
ele.style.display = 'none';
}
}
</scrip>

A full example is:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script>
function show(elementID) {
ele = document.getElementById(elementID);
if (ele.style.display == 'none') {
ele.style.display = 'block';
} else {
ele.style.display = 'none';
}
}

</script>
</head>

<body>
<a href="#" onclick="show('an1');" >Question 1 </a><br>
<div id="an1" style="display: none;" >
This is the text of the message.
</div>
<a href="#" onclick="show('an2');" >Question 2 </a><br>
<div id="an2" style="display: none;" >
This is the text of the message.
</div>

</body>

</html>
 
To follow up on the previous answer, the fundamentals of coding are almost
all the same but it can get quite complex to implement "collapsible content"
which is a common term that can be used for search. After using myself I can
recommend one of the "Switch Content" scripts from DynamicDrive [1].

I use Switch Content myself and the script functions very well but note the
JavaScript is hard to interpret making modifications to the code is very
difficult. Modifying the HTML is very simple. Even though it has a stupid
and misleading name, for a FAQ that functions like the example that was
shown, this Switch Content script from Dynamic Drive is recommended.

<%= Clinton Gallagher
METROmilwaukee (sm) "A Regional Information Service"
NET csgallagher AT metromilwaukee.com
URL http://metromilwaukee.com/
URL http://clintongallagher.metromilwaukee.com/

[1] http://www.dynamicdrive.com/dynamicindex17/
 
MD said:
function show(elementID) {
ele = document.getElementById(elementID);
if (ele.style.display == 'none') {
ele.style.display = 'block';
} else {
ele.style.display = 'none';
}
}
Click to expand...

Because I am into minimising my code as mcuh as possible, how about:
function show(elmt) {
var sty = document.getElementById(elmt).style.display
sty = (sty == 'none') ? 'block' : 'none'
}

:-))
 

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

Help 1
Collapsible list of question and answer 4
FAQ Page 8
Frontpage help 1
Bookmark and Hyperlink Alignment on page 1
Hyperlinks on FAQ page show visited when I navigate away and retur 9
how do I set the value for drop box to go to a bookmark on same p. 2
Create a Bookmark index? 1

Back
Top