这些天纠结的收放自如

类似常见问题（FAQ）的网页，通常都会首先显示所有问题列表，然后在用户点击某个问题时自动展开显示详细答案。收放自如的版式，既可以让读者在同一页面中查看大量信息，又不至于因为内容过多而使页面布局凌乱。

方案 1Toggle Visibility

可以使用以下代码，显示或隐藏指定区域。此方案的优势是，代码和结构都非常简单。而不足是，当区域显示后需要再次点击链接以重新隐藏内容。请查看在线实例。

	<script type="text/javascript">
	/*
	** Name: toggle_visibility
	** Desc: toggles id of element to be visible or not
	*/
	function toggle_visibility(id) {
	var e = document.getElementById(id);
	if (e.style.display == 'none')
	e.style.display = 'block';
	else
	e.style.display = 'none';
	}
	</script>
	<p><a title="Click to show/hide FAQ" href="javascript: toggle_visibility('FAQ1');">Question</a></p>
	<div style="display: none;" id="FAQ1">
	<p>Answer</p>
	</div>

view raw gistfile1.html hosted with ❤ by GitHub

方案 2Simple Javascript Accordions

Dezinerfolio使用Javascript开发的Simple Javascript Accordions，提供了横向、纵向和标签页等多种形式的收放效果。此方案的优势是，利用插件减少开发成本。而不足是，需要在页面加载时启动此插件，可能与其它插件产生冲突。请查看在线实例。

方案 3CSS3 Accordion Effect

CSS Ninja使用CSS3开发的Accordion Effect，提供了纯CSS并且支持多种浏览器（包括IE6+）的收放效果。此方案的优势是，CSS便于调试，并且不会与其它插件产生冲突。而不足是，收放效果在IE和非IE浏览器中稍有不同：在非IE中浏览器中，需要点击链接以展开内容；而在IE中，鼠标移动到标题行就会自动扩展显示。请查看在线实例。

注意：以上方案均需要为每段问答指定ID，代码维护成本较高。