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'
}

:-))
 
Back
Top