This script almost works, can anyone pinpoint the problem? [Archive]

niemie

11-16-2004, 10:49 AM

I found this and tried to modify it for my own needs - the problem is 2 fold. The main issue is it doesn't hide all on default. The second one is that instead of a checkbox I would like a text link to toggle show and hide but I have had no success so far.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
window.onload = onLoad;

function onLoad()
{
var sa = document.getElementById("chkViewAll");
if(typeof(IsPrinterFriendly) == "undefined") sa.checked = false;
else sa.checked = true;
}

function toggleAll()
{
var sa = document.getElementById("chkViewAll");
var ch = sa.checked;
toggleQuestions(ch);
}

function toggleQuestions(checked)
{
var secCount = 5;
var faqEntryCount = 37;
for(var j=1; j<=secCount; j++)
{
for (var i=1; i<=faqEntryCount; i++)
{
var title = document.getElementById("title" + j + i);
if(checked == true)
expandQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
else
collapseQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
}
}
if(checked == false)
{
var sa = document.getElementById("chkViewAll");
sa.checked = false;
}
}

function toggleQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (ans.style.display == '')
{
if (que != null) que.style.display = 'none';

ans.style.display = 'none';
var sa = document.getElementById("chkViewAll");
sa.checked = false;
}
else
{
if (que != null) que.style.display = '';
ans.style.display = '';
}
}

function expandQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (que != null) que.style.display = '';
ans.style.display = '';
}

function collapseQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (que != null) que.style.display = 'none';
ans.style.display = 'none';
}
</script>
</head>
<body>
<script language="Javascript">
document.write('<div id="selectAll" style="margin-top:10px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="right"><input id="chkViewAll" type="checkbox" onclick="toggleAll()"></td><td class="selectAll">View all answers</td></tr></table></div>');
</script>
<div id="title11" class="body"><a href="javascript:toggleQuestion('title11', 'question11', 'answer11')">Question 1?</a></div>
<div id="answer11" class="body">Answer 1.</div>
<div id="title12" class="body"><a href="javascript:toggleQuestion('title12', 'question12', 'answer12')">Question 2?</a></div>
<div id="answer12" class="body">Answer 2.</div>
<div id="title13" class="body"><a href="javascript:toggleQuestion('title13', 'question13', 'answer13')">Question 3?</a></div>
<div id="answer13" class="body">Answer 3</div>
</body>
</html>

7stud

11-16-2004, 07:12 PM

How about a couple of returns in that long code statement? :mad: Code tags preserve formatting, so unless you put in some line breaks, the code is one long line.

The main issue is it doesn't hide all on default
<style>
.body{display: none}
</style>

The second one is that instead of a checkbox I would like a text link to toggle show and hide...
Change the checkbox in this line:

document.write('<div id="selectAll" style="margin-top:10px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="right"><input id="chkViewAll" type="checkbox" onclick="toggleAll()"></td><td class="selectAll">View all answers</td></tr></table></div>');

to a link with:

<a onclick="onclick=toggleAll(); return false;" .....>

The return false will cancel the action, so the page specified in the link won't load in the browser.

Warren86

11-17-2004, 05:28 AM

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

window.onload = toggleAll;

function toggleAll()
{
var sa = document.getElementById("chkViewAll");
var ch = sa.checked;
toggleQuestions(ch);
}

function toggleQuestions(checked)
{
var secCount = 5;
var faqEntryCount = 37;
for(var j=1; j<=secCount; j++)
{
for (var i=1; i<=faqEntryCount; i++)
{
var title = document.getElementById("title" + j + i);
if(checked == true)
expandQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
else
collapseQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
}
}
if(checked == false)
{
var sa = document.getElementById("chkViewAll");
sa.checked = false;
}
}

function toggleQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (ans.style.display == '')
{
if (que != null) que.style.display = 'none';

ans.style.display = 'none';
var sa = document.getElementById("chkViewAll");
sa.checked = false;
}
else
{
if (que != null) que.style.display = '';
ans.style.display = '';
}
}

function expandQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (que != null) que.style.display = '';
ans.style.display = '';
}

function collapseQuestion(tName, qName, aName)
{
var title = document.getElementById(tName);
if (title == null) return;
var ans = document.getElementById(aName);
if (ans == null) return;
var que = document.getElementById(qName);
if (que != null) que.style.display = 'none';
ans.style.display = 'none';
}
</script>
</head>
<body>
<div id="selectAll" style="margin-top:10px;">
<table cellpadding="0" cellspacing="5" border="0">
<tr>
<td align="right"><input id="chkViewAll" type="checkbox" onclick="toggleAll()"></td>
<td class="selectAll"> View all answers </td>
</tr>
</table>
</div>
<div id="title11" class="body">
<a href=# onclick="toggleQuestion('title11', 'question11', 'answer11')"> Question 1 </a>
</div>
<div id="answer11" class="body">Answer 1.
</div>
<div id="title12" class="body">
<a href=# onclick="toggleQuestion('title12', 'question12', 'answer12')"> Question 2 </a>
</div>
<div id="answer12" class="body">Answer 2.
</div>
<div id="title13" class="body">
<a href=# onclick="toggleQuestion('title13', 'question13', 'answer13')"> Question 3 </a>
</div>
<div id="answer13" class="body">Answer 3.
</div>
</body>
</html>