JavaScript基本的な記述 その4

引き続きJavaScriptの基本的な記述方法です。
以下ソース。

内容の詳細を開いたり隠したり

【HTML】

<dl>
	<dt>HTML<a href="#" onclick="showDd(0)">［詳細］</a></dt>
    <dd>HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。<a href="#" onclick="hideDd(0)">［隠す］</a></dd>
	<dt>CSS<a href="#" onclick="showDd(1)">［詳細］</a></dt>
    <dd>Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。<a href="#" onclick="hideDd(1)">［隠す］</a></dd>
    <dt>jQuery<a href="#" onclick="showDd(2)">［詳細］</a></dt>
    <dd>jQuery（ジェイクエリー）は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。<a href="#" onclick="hideDd(2)">［隠す］</a></dd>
    <dt>PHP<a href="#" onclick="showDd(3)">［詳細］</a></dt>
	<dd>PHP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。<a href="#" onclick="hideDd(3)">［隠す］</a></dd>
</dl>

【Script】

<script>
  function showDd(i){
	  document.getElementsByTagName( "dd" )[i].style.display="block";
	  }
  function hideDd(i){
	  document.getElementsByTagName( "dd" )[i].style.display="none";
	  }
</script>

【CSS】

.content {
	width:520px;
	margin:0 auto 24px;
	text-align:left;
}
.content dt {
	color:#003333;
	font-wight: bold;
}
.content dd {
	display:none;
	margin-left:40px;
}
.content a {
	font-weight:bold;
	padding-left:0.25em;
	padding-right:0.25em;
	color:#339999;
}
.content a:link, .content a:visited {
	text-decoration:none;
}
.content a:hover, .content a:active {
	color:#FF9900;
	text-decoration:underline;
}

こんな感じです。