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

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

2007年03月07日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
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リファレンス

関連の記事検索:JavaScript, CSS, チュートリアル, Ajax, ライブラリ
スポンサード リンク

By.KJ : 2007年03月07日 10:07 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)