[Javascript] Multi-Layer Positioning

Fri Feb 6 00:09:57 CST 2004

On Feb 5, 2004, at 10:48 PM, Joe wrote:
> Hi, hope I can explain this well!
>
> I'm trying to find a script which will help me implement a faq system 
> in
> a way in which if a faq is clicked it would expand and correspondingly
> move the faqs below it down the page, and on the next click on it, it
> would then move the other faqs above, as in close the details.

Joe,

I don't have a ready made script for you, but I do have a technique I 
have often used that should do what you want... well I got carried 
away, and this page should do what you want.

Roger,

Roger Roelofs
<mailto:roger-roelofs at comcast.net>

Know what you value.

--------------------------- Code ---------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
     lang="en-US" xml:lang="en-US">
<head>
  <title>faq sample</title>

  <style type="text/css" media="screen">
h1 { color: darkblue; }
#faq li {
	background-color: lightblue;
	border: 1px solid blue;
	margin: .5em;
	padding: .25em;
}
#faq p {
	background-color: pink;
	border: 1px solid red;
	margin: .5em;
	padding: .25em;
}
.showMe { display:block; }
.hideMe { display:none; }
  </style>
  <script type="text/javascript">
function doShowHide(e) {
	if (!e) { e = window.event; }
	el = e.target;
	if (!el) { el = e.srcElement; }
	if (el.tagName.toLowerCase() != "li") el = el.parentNode;
	theAnswer = el.getElementsByTagName("p");
	if (theAnswer[0]) {
		if (theAnswer[0].className == "showMe") theAnswer[0].className = 
"hideMe";
		else theAnswer[0].className = "showMe";
	}
}

function setClickHandlers() {
	aQuestions = document.getElementsByTagName("li");
	for (var i = 0; i < aQuestions.length; i++) {
		aQuestions[i].onclick = doShowHide;
	}
}

function setShowHideClass() {
	aQuestions = document.getElementsByTagName("li");
	for (var i = 0; i < aQuestions.length; i++) {
		aAnswer = aQuestions[i].getElementsByTagName("p")
		aAnswer[0].className = "hideMe";
	}
}

function doSetup() {
	setClickHandlers();
	setShowHideClass();
}

window.onload = doSetup;
  </script>
</head>
<body>
<h1>faq Sample</h1>
<ol id="faq">
   <li>Why is the sky blue?
   <p>Because God made light that way...</p></li>
   <li>Why ask why?
   <p>Why not?</p></li>
  </ol>
</body>
</html>