JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル
2007年03月07日-
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リファレンス
最新のブログ記事(新着順)
- ダークモード対応のミニマルなHTMLページを作れるCSS「spcss」
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- シンプルなタブUIを実現できる「Skeletabs」
- テキストを省略してブロックを小さくできる「Cuttr.js」
- インタラクティブに動く立体的なテキストを生成「ztext.js」
- WebGLを使った動画の切り替えアニメーション実装
- スクロールにあわせて動くイメージタイル実装
- 過去のエントリ