Menu
I’m trying to separate the HTML from the JS function, but having not much luck.
Any ideas why I can not accomplish this?
[code]
<!DOCTYPE HTML>
<html>
<head>
<title> FAQ display</title>
<meta charset=”utf-8″>
<style type=”text/css”>
dt { line-height: 1.5em; }
</style>
</head>
<body>
<h1> FAQ List </h1>
<dl id=”FAQlist”>
<dt>faq #1</dt>
<dd>Answer to FAQ #1</dd>
<dt>faq #2</dt>
<dd>Answer to FAQ #2</dd>
<dt>faq #3</dt>
<dd>Answer to FAQ #3</dd>
<dt>More faqs </dt>
<dd>Answers to additional FAQs</dd>
<!– other Questions and Answers follow –>
</dl>
<script type=”text/javascript”>
function toggleDD(IDS) {
var tmp = document.getElementById(IDS);
if (tmp.style.display != ‘block’) { tmp.style.display = ‘block’; }
else { tmp.style.display = ‘none’; }
}
window.onload = function() {
// set-up actions of DL, DT and DD display
var sel = document.getElementById(‘FAQlist’).getElementsByTagName(‘dt’);
for (var i=0; i<sel.length; i++) {
sel[i].onclick=”toggleDD(‘faq”+i+”‘)”;
sel[i].style.cursor= ‘pointer’;
}
sel = document.getElementById(‘FAQlist’).getElementsByTagName(‘dd’);
for (var i=0; i<sel.length; i++) {
sel[i].id = ‘faq’+i;
sel[i].style.display = ‘none’;
}
// dd and dt must match in pairings of dl list
}
</script>
</body>
</html>
I’m not getting any errors, but then it doesn’t do what I expect anyway ???
Expect to toggle display for FAQ answers based upon users click.