menu
menu

JavaScriptでブロック要素の表示非表示(トグルボタン) | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook4
  • はてなブックマーク3
  • Google+6
  • Pocket0
  • Twitter0

JavaScriptでブロック要素の表示非表示(トグルボタン)

  • Labs

JavaScript

こんにちは(・∀・)

 JavaScriptを使用したサンプルをご紹介します。今回はトグルボタンによる要素の表示非表示です。

 ブロック要素の非表示はJavaScriptで制御しているのでJavaScriptを切っている場合はすべて展開した状態で表示されます。

1. 後ろの要素に重ねるタイプ

サンプルデモ

 サンプルデモはこちら!

HTML

<div class="objectopen">
<div class="bodytop">
<h3>要素の表示非表示サンプル</h3>
<p>Javascriptで要素の表示非表示のサンプルです。</p>
<p id="button1"><a href="javascript:void(0)" onclick="objectopen(); return false;">続きを読む</a></p>
<!--bodytop--></div>
<div id="bodybtm">
<p>後ろに続く要素に重ねるタイプです。z-indexで階層を変えてあります。</p>
<p id="button2"><a href="javascript:void(0)" onclick="objectopen(); return false;">閉じる</a></p>
<!--bodybtm--></div>
<!--objectopen--></div>
<div class="contents">
<p>要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。</p>
</div>
CSS

.objectopen {
	margin: 0 auto;
}
.contents {
	margin: 10px auto 40px auto;
	padding: 10px;
	background: #9fb7d4;
}
.objectopen .bodytop #button1,
.objectopen #bodybtm #button2 {
	text-align: right;
}
.objectopen .bodytop {
	padding: 10px;
	background: #d49fc2;
}
.objectopen #bodybtm {
	position: absolute;
	z-index: 1;
	opacity: 0.9;
	filter: alpha(opacity=90);
	width: 100%;
	background: #d49fc2;
	display: none;
}
.objectopen #bodybtm p {
	padding: 10px;
}
JavaScript

function objectopen(){
showobj('bodybtm');
return false;
}
function showobj(obj) {
var box = document.getElementById(obj);
var btn1 = document.getElementById('button1');
if( box.style.display != "block" ) {
box.style.display = "block";
btn1.style.visibility = "hidden";
} else {
box.style.display = "none";
btn1.style.visibility = "visible";
}
}

2. 後ろの要素に重ねないタイプ

サンプルデモ

 サンプルデモはこちら!

HTML

<div class="objectopen">
<div class="bodytop">
<h3>要素の表示非表示サンプル</h3>
<p>Javascriptで要素の表示非表示のサンプルです。</p>
<p id="button3"><a href="javascript:void(0)" onclick="objectopen2(); return false;">続きを読む</a></p>
<!--bodytop--></div>
<div id="bodybtm2">
<p>後ろに続く要素に重ねないタイプです。z-indexは使用しません。</p>
<p id="button4"><a href="javascript:void(0)" onclick="objectopen2(); return false;">閉じる</a></p>
<!--bodybtm2--></div>
<!--objectopen--></div>
<div class="contents">
<p>要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。</p>
</div>
CSS

.objectopen {
	margin: 0 auto;
}
.contents {
	margin: 10px auto 40px auto;
	padding: 10px;
	background: #9fb7d4;
}
.objectopen .bodytop #button3,
.objectopen #bodybtm2 #button4 {
	text-align: right;
}
.objectopen .bodytop {
	padding: 10px;
	background: #d49fc2;
}
.objectopen #bodybtm2 {
	width: 100%;
	background: #d49fc2;
	display: none;
}
.objectopen #bodybtm2 p {
	padding: 10px;
}
JavaScript

function objectopen2(){
showobj2('bodybtm2');
return false;
}
function showobj2(obj2) {
var box2 = document.getElementById(obj2);
var btn3 = document.getElementById('button3');
if( box2.style.display != "block" ) {
box2.style.display = "block";
btn3.style.display = "none";
} else {
box2.style.display = "none";
btn3.style.display = "block";
}
}

関連リンク

 CSSだけで要素の表示非表示

 jQueryで要素の表示非表示

  • カテゴリー:Labs
  • facebook4
  • はてなブックマーク3
  • Google+6
  • Pocket0
  • Twitter0