Question about swapping text

Malkalypse · #1 Sep 18th, 2006, 22:56

I'm trying to set up a series of questions, which would look basically like an unordered list. Then, upon clicking a box next to any of the questions, the answer would appear underneath the question. Clicking that same box a second time would cause the answer to disappear. It seems very simple, and I've tried using a couple of different text swapping functions, but for some reason I can't get the answer text to appear in the right places. The script seems to have a hard time keeping track of where things are supposed to go, and it's really irritating me. I need to find a solution ASAP. Thanks!

Ryan Fait · #2 Sep 19th, 2006, 01:57

I wrote this a while back for someone with the same question. I upgraded it a little so it won't stop the script if there is no "questions" id. It degrades nicely too. If the user doen't have JavaScript enabled, the questions won't be links and the answers will be visible.

The javascript:

Code: Select all

document.write('<style type="text/css">dd { display: none; }</style>');

var titles, define, i, state, number;

function handle() {
	if(document.getElementById("questions")) {
		titles = document.getElementById("questions").getElementsByTagName("dt");
		define = document.getElementById("questions").getElementsByTagName("dd");
		for(i = 0; i < titles.length; i++) {
			titles[i].innerHTML = '<a href="#' +( i + 1) + '">' + titles[i].innerHTML + '</a>';
			titles[i].setAttribute("class", "hidden-" + i);
			titles[i].onclick = function() {
				state = this.getAttribute("class").split("-")[0];
				number = this.getAttribute("class").split("-")[1];
				if(state == "hidden") {
					define[number].style.display = "block";
					this.setAttribute("class", "visible-" + number);
				} else {
					define[number].style.display = "none";
					this.setAttribute("class", "hidden-" + number);
				}
				return false;
			}
		}
	}
}
window.onload = handle;

And the HTML:

Code: Select all

<html>
	<head>
		<script type="text/javascript" src="toggle.js"></script>
		<title>Toggle</title>
	</head>
	<body>
		<dl id="questions">
			<dt>Question #1</dt>
			<dd>Answer 1</dd>
			<dt>Question #2</dt>
			<dd>Answer 2</dd>
			<dt>Question #3</dt>
			<dd>Answer 3</dd>
			<dt>Question #4</dt>
			<dd>Answer 4</dd>
		</div>
	</body>
</html>

Ryan Fait · #3 Sep 19th, 2006, 02:03

I just realized: the only bad thing about this is you can only have one definition list because it has an ID. I could modify it if you need it to support multiple lists, though.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Swapping script	Izkoo	JavaScript Forum	3	Jun 7th, 2008 20:13
show/hide divs swapping - a bit of interactivity	benreynolds4	JavaScript Forum	1	May 29th, 2008 09:06
Question about anchor text	belock1980	Starting Out	3	Apr 17th, 2008 16:36
Link Anchor Text Question	fireboat	Search Engine Optimization (SEO)	5	Sep 11th, 2007 06:10
Link Swapping Practice	Lchad	Webforumz Cafe	4	Jun 27th, 2007 20:13

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Question about swapping text