[RESOLVED] show / hide

emma · #1 08-19-2005, 12:32 PM

I have a FAQ's section on a webpage and I want the page to have the questions in a list and when a user clicks the question the answer will appear show underneath that question. Also when the user clicks the question again the answer will hide.

Can anyone send me the Javascript code that will do this please?

**Fang** · #2 08-19-2005, 12:50 PM

Code:

<!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>

emma · #3 08-22-2005, 04:50 AM

Excellent - thanks for that it works just as I wanted it to.

Dorisanna · #4 08-24-2005, 03:54 PM

hello,

My question is... How do you seperate the FAQ's into categories?
Example:

About SharePoint Portal
What is sharePoint Portal Server 2003?
How will using SharePoint benefit my department?

Login and access issues
How do I login?

I've tried the script that you have listed and it's wonderful, but I am having a hard time seperating the different categories. It basically puts all the questions together so you can't categorize them.
Help please!!!

Thank you!

chet23 · #5 04-18-2006, 02:42 PM

Is there a simple way to have a selected element appear expanded onLoad?

**Fang** · #6 04-18-2006, 04:07 PM

It depends how the index to the menu is passed to the document.
This is one possibility:

Code:

<!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();
    var openDT=document.body.id.charAt(document.body.id.length-1)
     toggle(document.getElementById('content').getElementsByTagName('dt')[openDT]);
    }
}
</script>

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

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

slaughters · #7 04-18-2006, 04:27 PM

Something like this would be simpler

Code:

<html>
<head>
<title>Untitled Document</title>
<script>
 function OpenClose(obj) {
   if (obj.style.display=='block') {
     obj.style.display='none';
   } else {
     obj.style.display='block';
   }
 }
</script>
</head>

<body>

<div id="ClickMe_Head" onClick="OpenClose(ClickMe_Body)" onMouseOver="this.style.cursor='pointer';">
 Click Me
</div>
<div id="ClickMe_Body" style="display:none;">
 Blah blah blah bla<br>
 blah blah blah bla<br>
 Blah blah blah bla<br>
 blah blah blah bla
</div>

</body>
</html>

chet23 · #8 04-18-2006, 04:40 PM

Oh wow, that's beautiful. Your script's a little beyond my ability to fully grok, but its great. Thank you so much for your quick response. It does exactly what I was hoping it would.I thopight an ID needed to be added somewhere, but wasn't sure how to proceed.

What sort of modifications would be required to lock a DD element open on a given page (keep it from closing)? And if one wanted to close other DDs when another opened? These aren't necessary for my purposes, but would round out this script nicely.. Might even shed some light on how its working. Right now I grok about 85% of what's going on there.

Thanks again, Fang, for your help.Your are a gentleman (woman?) and a scholar. May you live long and prosper.

Sincerely,
a much indebted Chet23

chet23 · #9 04-18-2006, 04:44 PM

Slaughters,
Thanks for your input. That works great, but I especially like the way Fang's script uses the '+' and '-' before the section headers. Makes the links function like a tree, which is what I was specifically looking for.
-Chet

**Fang** · #10 04-18-2006, 04:59 PM

Moving the goalposts ...

Code:

<!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');
var openDT=document.body.id.charAt(document.body.id.length-1);
for (var i=0; i < oDT.length; i++) {
    if(i!=openDT) {
        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]);
    	}
    else {
        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=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 id="index1">
<dl id="content">
    <dt>Headline 1</dt>
    	<dd>Content 1</dd>
    <dt>Headline 2</dt>
    	<dd>Content 2</dd>
    <dt>Headline 3</dt>
    	<dd>Content 3</dd>
</dl>
</body>
</html>

chet23 · #11 04-18-2006, 08:30 PM

Thanks again, Fang. I swear I wasn't moving goalposts - i was just curious.

I do have another question now though. I actually stumbled across a solution earlier, but don't know where - can't find it now. When i load a page with this script, the whole expanded list appears for a quick second then collapses to where it should be. The fix I had found said something about adding something just before the closing body tag of each doc. Do you know what I'm talkihng about? Do you have a solution?

Thanks in advance for your help. If there's anything I can do to rteturn the favor, let me know.

-Chet

**Fang** · #12 04-19-2006, 01:52 AM

Another Dutch treat: http://www.bobbyvandersluis.com/articles/dynamicCSS.php

slaughters · #13 04-19-2006, 08:09 AM

Quote:

Originally Posted by chet23

Slaughters,
Thanks for your input. That works great, but I especially like the way Fang's script uses the '+' and '-' before the section headers. Makes the links function like a tree, which is what I was specifically looking for.
-Chet

If it fits your needs better then great, but I still think it is overly complexed code for a very simple task.

P.S.

Plus and minus signs are easy enough to add
Link: http://www.stansight.com/temp.html
Code:

Code:

<html>
<head>
<title>Untitled Document</title>
<script>
 function OpenClose(obj) {
   HeadObj = eval(obj + "_Head");
   BodyObj = eval(obj + "_Body");

   if (BodyObj.style.display=='block') {
     BodyObj.style.display='none';
     SignOffset = HeadObj.innerHTML.indexOf("-");
     HeadObj.innerHTML = "+" + HeadObj.innerHTML.substring(SignOffset+1);
   } else {
     BodyObj.style.display='block';
     SignOffset = HeadObj.innerHTML.indexOf("+");
     HeadObj.innerHTML = "-" + HeadObj.innerHTML.substring(SignOffset+1);
   }
 }
</script>
</head>

<body>

<div id="ClickMe1_Head" onClick="OpenClose('ClickMe1')" onMouseOver="this.style.cursor='pointer';" style="color: #000099;">
+ FAQ # 1
</div>
<div id="ClickMe1_Body" style="display:none; margin-left:20px">
 That's a FAQ Jack ! That's a FAQ Jack ! That's a FAQ Jack !
</div>

<div id="ClickMe2_Head" onClick="OpenClose('ClickMe2')" onMouseOver="this.style.cursor='pointer';" style="color: #000099;">
+ FAQ # 2
</div>
<div id="ClickMe2_Body" style="display:none; margin-left:20px">
 That's a FAQ Jack ! That's a FAQ Jack ! That's a FAQ Jack !
</div>
</body>
</html>

**Fang** · #14 04-19-2006, 10:42 AM

slaughters
http://www.digital-web.com/articles/...d_structure_2/
http://blogs.msdn.com/ericlippert/ar.../01/53329.aspx
http://www.w3.org/TR/WCAG20-SCRIPT-TECHS/#doc-write
http://www.w3.org/QA/Tips/Doctype

slaughters · #15 04-19-2006, 11:44 AM

Fang - The links you posted are written by people who:

(a) Opinions I disagree with, or
(b) Have very narrowly focused points of view

Let's get practical. Point to a browser which would have issues with the code I posted.

Here is good link to world wide web browser usage statistics for March 2006: http://www.thecounter.com/stats/2006/March/browser.php This code should work for every browser that has a usage of 1% or greater. If not let me know. If you can't find one, or if it is so obscure that only 0.001 % of the people use it, then I really don't see the point.

My style is to write easy to understand and maintain code that works for the specific targeted group (in this case IE and Firefox browsers). Cryptic code that supports everything and everyone just leads to headaches for the people who have to follow behind you and maintain it.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)