PDA

Click to See Complete Forum and Search --> : need assistance...

public_M
05-07-2005, 08:18 AM
I've done multiple searches but not really sure how to classify this so didn't really get anything usefull. So I'm going to ask the question and hopefully get some feedback.

anywho, what id like to do is create a questionaire page, that uses the plus and minus boxes to the right of the question that when you click the + sign it will drop down with a brief description of the question and the + sign turns into the - sign. Forgive my ignorance on even trying to explain this.

for exmple: when the web page loads, it starts off being in normal view, and when you click the + sign it goes into the expanded view and vise versa.

Normal view
+ question one.
+ question two.

Expanded view
- question one.
Brief description of question one.
- question two.
Breif description of question two.



If anyone can understand what i mean by this and can maybe give me some assistance it would be greatly appreciated. I thank you..
scragar
05-07-2005, 08:26 AM
<script type="text/javascript"><!--
function foo(){
if(arguments[0].src=='plus.gif'){
arguments[0].parentNode.getElementsByTagName('SPAN')[0].style.display='';
arguments[0].src='minus.gif';
}else{
arguments[0].parentNode.getElementsByTagName('SPAN')[0].style.display='none';
arguments[0].src='plus.gif';
};
};
//-->
</script>

<span><img src="plus.gif" onclick="foo(this)">
<span style="display: none;">some hidden content</span></span>
Fang
05-07-2005, 10:47 AM
For a multi-level version see Vladdy's tree (http://www.vladdy.net/demos/tree.html)
or <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>hide or show</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
<!--
function toggle(obj) {
// Moz. or IE
var sibling=(obj.nextSibling.nodeType==3)? obj.nextSibling.nextSibling : obj.nextSibling;
// hide or show
if(sibling.style.display=='' || sibling.style.display=='block') {
sibling.style.display='none';
obj.firstChild.firstChild.data='+';
}
else {
sibling.style.display='block';
obj.firstChild.firstChild.data='-';
}
}
//
function initCollapse() {
var oDT=document.getElementById('content').getElementsByTagName('dt');
for (var i=0; i < oDT.length; i++) {
oDT[i].onclick=function() {toggle(this)};
var oSpan=document.createElement('span');
var sign=document.createTextNode('+');
oSpan.appendChild(sign);
oDT[i].insertBefore(oSpan, oDT[i].firstChild);
oSpan.style.fontFamily='monospace';
oSpan.style.paddingRight='0.5em';
oDT[i].style.cursor='pointer';
toggle(oDT[i]);
}
oDT=null;
}
window.onload=function() {if(document.getElementById && document.createElement) {initCollapse();}}
//-->
</script>

<style type="text/css">
<!--
body{
background:#ccc;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1em;
}
-->
</style>

</head>
<body>
<dl id="content">
<dt>Headline 1</dt>
<dd>Content 1</dd>
<dt>Headline 2</dt>
<dd>Content 2</dd>
</dl>
</body>
</html>