文字列をリンク風ボタンとして使い、テキストの詳細表示・非表示を切り替える
--------------------------------------------------
「全部見る」の表示をリンクに見せかけるため、CSSでカーソルを指型に切り替えている。「cursor:pointer; cursor:hand;」と２重にしているのはFireFoxとIEの両方に対応するため。FireFoxが「hand」 を理解できないため、最初にpointerで指定している。
--------------------------------------------------
<html lang="ja">
<head>
<title>詳細切り替えテスト</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
<!--
function dispctrl(div) {
var obj = document.getElementById(div);
if(obj && obj.style) obj.style.display="none" == obj.style.display ?"" : "none"
var obj2 = document.getElementById("dctrl");
if (obj2.childNodes[0].nodeValue == "全件見る") {
obj2.childNodes[0].nodeValue = "表示縮小";
} else {
obj2.childNodes[0].nodeValue = "全件見る";
}
}
//-->
</script>
</head>
<body>
<div>
概要
</div>
<div id="fulltext" style="display:none;">
詳細文１
詳細文２
</div>
<p onClick='dispctrl("fulltext")'; id="dctrl" style="cursor:pointer; cursor:hand; text-align:right; color:#0000ff; text-decoration:underline;">全部見る</p>
</body>
</html>
--------------------------------------------<head>
<title>詳細切り替えテスト</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
<!--
function dispctrl(div) {
var obj = document.getElementById(div);
if(obj && obj.style) obj.style.display="none" == obj.style.display ?"" : "none"
var obj2 = document.getElementById("dctrl");
if (obj2.childNodes[0].nodeValue == "全件見る") {
obj2.childNodes[0].nodeValue = "表示縮小";
} else {
obj2.childNodes[0].nodeValue = "全件見る";
}
}
//-->
</script>
</head>
<body>
<div>
概要
</div>
<div id="fulltext" style="display:none;">
詳細文１
詳細文２
</div>
<p onClick='dispctrl("fulltext")'; id="dctrl" style="cursor:pointer; cursor:hand; text-align:right; color:#0000ff; text-decoration:underline;">全部見る</p>
</body>
</html>
「全部見る」の表示をリンクに見せかけるため、CSSでカーソルを指型に切り替えている。「cursor:pointer; cursor:hand;」と２重にしているのはFireFoxとIEの両方に対応するため。FireFoxが「hand」 を理解できないため、最初にpointerで指定している。
