menu
menu

jQueryでブロック要素の表示非表示(トグルボタン) | 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だけでブロック要素の表示非表示(トグルボタン)
  • facebook8
  • はてなブックマーク5
  • Google+5
  • Pocket0
  • Twitter0

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

  • Labs

jQuery

こんにちは(・∀・)

 jQueryを使用したサンプルをご紹介します。今回はトグルボタンによる要素の表示非表示です。ブロック要素の非表示はJavaScriptで制御しているのでJavaScriptを切っている場合はすべて展開した状態で表示されます。

1. show()hide()を使ったサンプル

サンプルデモ

 サンプルデモはこちら!

HTML

 Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div class="objectopen">
<div class="bodytop">
<h3>要素の表示非表示サンプル</h3>
<p>jQueryで要素の表示非表示のサンプルです。</p>
<span class="button">続きを読む</span>
<!--bodytop--></div>
<div class="bodybtm">
<p>後ろに続く要素に重ねるタイプです。z-indexで階層を変えてあります。重ねたくない場合はCSSのz-indexを削除してください。</p><span class="button2">閉じる</span>
<!--bodybtm--></div>
<div class="contents">
<p>要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。</p>
</div>
<!--objectopen--></div>
CSS

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

$(function() {
//$('.bodybtm').hide();
$('.button').click(function(){
$('.bodybtm').show();
$('.button').css('visibility', 'hidden');
});
$('.button2').click(function(){
$('.bodybtm').hide();
$('.button').css('visibility', 'visible');
});
});

2. slideToggle()を使ったサンプル

サンプルデモ

 サンプルデモはこちら!

HTML

<div class="objectopen">
<div class="bodytop">
<h3>要素の表示非表示サンプル</h3>
<p>jQueryで要素の表示非表示のサンプルです。</p>
<span class="button3">続きを読む</span>
<!--bodytop--></div>
<div class="bodybtm2">
<p>後ろに続く要素に重ねないタイプです。z-indexは使用しません。重ねたい場合はCSSのz-indexのコメントアウトを削除してください。</p>
<!--bodybtm2--></div>
<div class="contents">
<p>要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。</p>
</div>
<!--objectopen--></div>
CSS

.objectopen {
	margin: 0 auto;
}
.bodytop {
	padding: 10px;
	background: #d49fc2;
}
.bodybtm2 {
	width: 100%;
	background: #d49fc2;
	display: none;
}
.bodybtm2 p,
.bodybtm2 span {
	padding: 10px;
}
.bodytop .button3 {
	cursor: pointer;
	color: #4776AF;
}
.contents {
	margin: 10px auto 40px auto;
	padding: 10px;
	background: #9fb7d4;
}
JavaScript

$(document).ready(function(){
//$('.bodybtm2').hide();
var flg = 'close';
$('.button3').click(function(){
$('.bodybtm2').slideToggle('fast');
if(flg == 'close'){
flg = 'open';
$(this).text('閉じる');
}else{
flg = 'close';
$(this).text('続きを読む');
}
});
});

関連リンク

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

 JavaScriptで要素の表示非表示

  • カテゴリー:Labs
  • facebook8
  • はてなブックマーク5
  • Google+5
  • Pocket0
  • Twitter0