折りたたみ式Q&A

javascript

Q&Aページで、質問文をクリックするとその下に回答内容が表示される…
といったのが時々ありますが、訳あってそんなのを作ってみたんで折角なのでupしてみます。

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>JavaScript Q and A</title>
<style type="text/css">
div#qabox {
	background-color: #dcdcdc;
	padding: 10px;
}
div#qabox h4 {
	margin: 0px;
	padding-left: 0.5em;
	background-color: #fff;
}
div#qabox ul { padding-left: 1em; }
div#qabox ul li { list-style-type: none; }
div#qabox ul li.que { cursor: pointer; }
div#qabox ul li.ans {
	display: none;
	padding-left: 1em;
}
</style>
<script type="text/javascript">
function changeVisible(e) {
	var own = e.srcElement ? e.srcElement: e.target;
	if (own.nodeName != 'LI' || own.className == 'ans') return;
	var tgt = own.nextSibling;
	if (tgt.currentStyle) {
		var s = tgt.currentStyle.display == 'none' ? 'block': 'none';
	} else if (document.defaultView.getComputedStyle) {
		var s = document.defaultView.getComputedStyle(tgt, null).getPropertyValue('display') == 'none' ? 'block': 'none';
	}
	tgt.style.display = s;
}
window.onload = function() {
	var elm = document.getElementById('qabox');
	if (document.attachEvent) {
		elm.attachEvent('onclick', changeVisible);
	} else if (document.addEventListener) {
		elm.addEventListener('click', changeVisible, false);
	}
}
</script>
</head>
<body>
<div id="qabox">
	<h4>ほげに関して</h4>
	<ul>
		<li class="que">どうすればそんなにほげれるのでしょう?
		<li class="ans">一心不乱にほげる事のみを考えましょう。
		<li class="que">ほげの先には何がありますか?
		<li class="ans">ふがです。
	</ul>
	<h4>ふがに関して</h4>
	<ul>
		<li class="que">どうすればそんなにふがれるのでしょう?
		<li class="ans">適当でおｋｗｗばっちこーい
		<li class="que">ふがはおいしいのですか?
		<li class="ans">超うめぇ
	</ul>
</div>
</body>
</html>

方法的には至って簡単。特定のdiv要素内にlist要素で作成したQ&Aを質問・回答の順に配置して、
回答の方は予めcssのdisplay属性をnoneにして非表示にしておく。
で、質問側のlist要素をクリックしたら、それに対する回答、つまりは次のlist要素のdisplay属性を
blockにして表示させる…といった感じです。

サンプル

こんな感じになります。

ちなみに

予めdisplay属性をnoneにしているlist要素をjavascriptでblockとかにして表示させると、
なぜかマーカーやマーカー画像が表示されません。ソース中で明示的に

elm.style.listStyleType = 'disc';

としてやっても、表示されません。最初はFirefoxのバグかと思ったんですが、
その他のブラウザ*1も同じ挙動なので、自分のソースがおかしいのか、
はたまた、仕様なのか…*2
ちなみにIE6では表示されるんで、こんなとこでもIE6の異端ぶりが如何なく発揮されとります。(；^ω^)
とりあえず、この点については、またそのうち調べてみようと思います。

*1:Safari,Opera,Chrome

*2:もし仕様なんであれば、ちょっと解せないですが。