JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル:phpspot開発日誌

前の記事 ≪：とても便利なJavaScript関数集
次の記事 ≫：約21,500軒の宿泊施設情報が取得可能な楽天トラベルAPI

JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル

2007年03月07日-

スポンサードリンク

Harry Maugans How to Create a Collapsible DIV with Javascript and CSS

One of the most handy (and cool) tricks a web developer could learn to use is collapsible DIVs.

JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル。
次のように数行で行える簡単なサンプルが紹介されていてライブラリに依存しない＆軽い、簡単な実装を行いたい時に使えます。

<div id="mydiv" style="display:none"><h3>This is a test!<br>Can you see me?</h3></div>
<a href="javascript:;" onmousedown="if(document.getElementById('mydiv').style.display == 'none'){ document.getElementById('mydiv').style.display = 'block'; }else{ document.getElementById('mydiv').style.display = 'none'; }">Toggle Div Visibility</a>

toggleDivという関数での表示/非表示サンプルも公開されています。

prototype.jsを使って次のように簡単に行うことも可能。

<html>
<head>
<title>Element.toggle - エレメントの表示状態をトグル</title>
</head>

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript">
function execute() {
var item = $('sample');
Element.toggle(item); // 表示→非表示、非表示→表示
}
</script>
<body>
<button onclick="execute()">サンプル実行</button>
<div id="sample" style="background-color:red">element</div>
</body>
</html>

Element.toggle - エレメントの表示状態をトグル - prototype.jsリファレンス