Toggle List

FAQ 리스트와 같이 클릭으로 컨텐츠를 보이고 안보이게 하는 기능을 하는 toggle list이다. <a>태그의 href값에 toggle할 엘리먼트의 id를 넣어서 연결해주면 toggle기능을 수행한다.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Definition List Toggle</title>
<script type="text/javascript">
/* definition list toggle */
function initToggle(tabContainer) {
	triggers = tabContainer.getElementsByTagName("a");

	for(i = 0; i < triggers.length; i++) {
		if (triggers.item(i).href.split("#")[1])
			triggers.item(i).targetEl = document.getElementById(triggers.item(i).href.split("#")[1]);

		if (!triggers.item(i).targetEl)
			continue;

		triggers.item(i).targetEl.style.display = "none";
		triggers.item(i).onclick = function () {
			if (tabContainer.current == this) {
				this.targetEl.style.display = "none";
				tabContainer.current = null;
			} else {
				if (tabContainer.current) {
					tabContainer.current.targetEl.style.display = "none";
				}
				this.targetEl.style.display = "block";
				tabContainer.current = this;
			}
			return false;
		}
	}
}
</script>
<style type="text/css">
#faq-list {
	width: 500px;
}
#faq-list dt {
	border-bottom: 1px solid #ccc;
	padding: 0.5em;
}
#faq-list dt:hover {
	background: #fafafa;
}
#faq-list dd {
	border: 1px solid #ccc;
	padding: 0.5em;
	margin: 1em;
}
</style>
</head>

<body>
<h1>Faq For Publish</h1>
<dl id="faq-list">
	<dt><a href="#answer1">HTML은 무엇인가요?</a></dt>
	<dd id="answer1">HTML은 <a href="http://w3c.org/MarkUp/">HyperText Mark up Language</a>로서 구조적은 문서를 제작할때 사용하는 markup 언어 입니다.</dd>
	<dt><a href="#answer2">CSS는 무엇인가요?</a></dt>
	<dd id="answer2"><a href="http://w3c.org/Style/CSS/">Cascading Style Sheet</a>의 약자로서 HTML, XHTML, XML 등과 같은 구조를 나타낸 문서의 표현 형태를 정의하는 방법입니다.</dd>
	<dt><a href="#answer3">W3C는 무엇인가요?</a></dt>
	<dd id="answer3"><a href="http://w3c.org">World Wide Web Consrotium</a>이라는 비 영리 단체로서 인터넷을 발명한 <a href="http://en.wikipedia.org/wiki/Tim_Berners-Lee">Tim Berners-Lee</a>가 만든 단체 입니다. HTML, CSS, XHTML, XML 등 많은 웹표준을 만들었고 W3C 산하의 많은 단체에서 웹의 보편성을 위해서 많은 노력을 하고 있습니다.</dd>
	<dt><a href="#answer4">XHTML은 무엇인가요?</a></dt>
	<dd id="answer4">웹이 XML로 넘어가는 과도기적인 형태의 문서 입니다. 간단하게 말하면, HTML 의 DTD 를 많이 따르면서 XML의 문법에 기초한 Mark up 언어 입니다.</dd>
	<dt><a href="#answer5">ECMA Script는 무엇인가요?</a></dt>
	<dd id="answer5"><a href="http://www.ecma-international.org">ECMA International</a>에서 만든 <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Script Language 표준</a>입니다. 쉽게 생각해서 Javascript 표준이라고 생각 하면 됩니다. MS Internet Explorer, Mozilla, Mozilla Firefox, Opera 등 거의 대부분의 브라우져에서 채택하고 있는 Script 언어 표준 입니다.</dd>
</dl><!-- end of #faq-list -->
<script type="text/javascript">
initToggle(document.getElementById("faq-list"));
</script>
</body>
</html>
Toggle List

Search
