クリックして新たな情報を表示するJavaScript

特定の場所をクリックすると、下部に情報を表示させるJavaScriptです。

■JavaScriptソースはこちら

<script type="text/javascript">

if (typeof jp == "undefined") {

var jp = {};

}

if (typeof jp.rinco == "undefined") {

cv = {};

}

</script>

<script type="text/javascript">

cv.display = function(id) {

var target = document.getElementById(id);

if (target.style.visibility == 'hidden') {

target.style.visibility = 'visible';

target.style.display = 'block';

} else {

target.style.visibility='hidden';

target.style.display = 'none';

}

}

</script>

■HTMLソースはこちら

<div

style="background-color:blue;

color:white; padding:4px"

onclick="jp.rinco.display('down');">

ここをクリックで内容表示

</div>

<div id="down"

style="visibility:hidden; display:none;

background-color: #E8F3FF; padding:4px">

表示される内容！<br />

表示される内容！

</div>