【Labs】jQueryでブロック要素の表示非表示 - web design lab
home > labs > 【Labs】jQueryでブロック要素の表示非表示

12月更新・前月(11月)の人気記事トップ10 12/07/2023

  1. ( 02 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
  2. ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
  3. ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
  4. ( 05 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
  5. ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  6. (圏外↑) 【jQuery】入門11. switch文による条件分岐
  7. (圏外↑) 【Mac】Safariでソースコードを見る方法
  8. ( 09 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
  9. (圏外↑) 【jQuery】入門7. jQueryで新しいWindowを開く
  10. (圏外↑) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村
【Labs】マウスオーバーでボタンの画像が変わるロールオーバー 【Labs】CSSだけでドロップダウンメニュー

【Labs】jQueryでブロック要素の表示非表示


【Labs】jQueryでブロック要素の表示非表示

こんにちは（・∀・）

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

Contents

  1. show()hide()を使った後ろに続く要素に重ねるタイプ
  2. show()hide()を使った後ろに続く要素に重ねないタイプ
  3. slideToggle()を使った後ろに続く要素に重ねるタイプのトグルボタン
  4. slideToggle()を使った後ろに続く要素に重ねないタイプのトグルボタン
1. show()hide()を使った後ろに続く要素に重ねるタイプ
HTML

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


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


<div class="container">
<div class="top">
<p>listen,<br>
overlook,<br>
voice,<br>
effort.</p>
<span class="topbtn">More ≫</span>
<!--top--></div>
<div class="btm-wrap">
<div class="btm">
<div class="btm-inner">
<p>相手のいいたいことをきいてあげようという思いやり。<br>
相手の悪いところを大目にみてあげようという寛大さ。<br>
自分の気持ちや心を言葉で表すこと。<br>
あきらめずお互いに努力すること。</p>
<span class="btmbtn">≪ Close</span>
<!--btm-inner--></div>
<!--btm--></div>
<!--btm-wrap--></div>
<div class="top">
<p>listen, overlook, voice, effort. listen, overlook, voice, effort.</p>
<span class="topbtn2">More ≫</span>
<!--top--></div>
<div class="btm-wrap">
<div class="btm2">
<div class="btm-inner">
<p>相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。</p>
<span class="btmbtn2">≪ Close</span>
<!--btm-inner--></div>
<!--btm2--></div>
<!--btm-wrap--></div>
<!--container--></div>
CSS

.container {
  margin: 0 auto;
  text-align: left;
}
.container .top {
  padding: 10px 10px 0 10px;
  background: #fff;
}
.container .btm-wrap {
  position: relative;
}
.container .btm-wrap .btm {
  margin-top: -25px;
  position: absolute;
  z-index: 2;
  opacity: 0.9;
  filter: alpha(opacity=90);
  background: #fff;
  display: none;
}
.container .btm-wrap .btm2 {
  margin-top: -25px;
  position: absolute;
  z-index: 1;
  opacity: 0.9;
  filter: alpha(opacity=90);
  background: #fff;
  display: none;
}
.container .btm-wrap .btm .btm-inner,
.container .btm-wrap .btm2 .btm-inner {
  padding: 0 10px 10px 10px;
}
.container .top .topbtn,
.container .btm .btmbtn {
  text-align: left;
  display: block;
  width: 80px;
  margin: 0;
  cursor: pointer;
  color: #4776AF;
}
.container .top .topbtn2,
.container .btm2 .btmbtn2 {
  text-align: center;
  display: block;
  width: 80px;
  margin: 0 auto;
  cursor: pointer;
  color: #4776AF;
}
JavaScript

$(function() {
$('.topbtn').click(function(){
$('.btm').show();
$('.topbtn').css('visibility', 'hidden');
});
$('.btmbtn').click(function(){
$('.btm').hide();
$('.topbtn').css('visibility', 'visible');
});
});
$(function() {
$('.topbtn2').click(function(){
$('.btm2').show();
$('.topbtn2').css('visibility', 'hidden');
});
$('.btmbtn2').click(function(){
$('.btm2').hide();
$('.topbtn2').css('visibility', 'visible');
});
});
Result

サンプルデモ

2. show()hide()を使った後ろに続く要素に重ねないタイプ
HTML

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


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


<div class="container">
<div class="top">
<p>listen,<br>
overlook,<br>
voice,<br>
effort.</p>
<span class="topbtn">More ≫</span>
<!--top--></div>
<div class="btm">
<p>相手のいいたいことをきいてあげようという思いやり。<br>
相手の悪いところを大目にみてあげようという寛大さ。<br>
自分の気持ちや心を言葉で表すこと。<br>
あきらめずお互いに努力すること。</p>
<span class="btmbtn">≪ Close</span>
<!--btm--></div>
<div class="top">
<p>listen, overlook, voice, effort. listen, overlook, voice, effort.</p>
<span class="topbtn2">More ≫</span>
<!--top--></div>
<div class="btm2">
<p>相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。</p>
<span class="btmbtn2">≪ Close</span>
<!--btm2--></div>
<!--container--></div>
CSS

.container {
  margin: 0 auto;
  text-align: left;
}
.container .top {
  padding: 10px 10px 0 10px;
  background: #fff;
}
.container .btm,
.container .btm2 {
  margin-top: -25px;
  padding: 0 10px 10px 10px;
  background: #fff;
  display: none;
}
.container .top .topbtn,
.container .btm .btmbtn {
  text-align: left;
  display: block;
  width: 80px;
  margin: 0;
  cursor: pointer;
  color: #4776AF;
}
.container .top .topbtn2,
.container .btm2 .btmbtn2 {
  text-align: center;
  display: block;
  width: 80px;
  margin: 0 auto;
  cursor: pointer;
  color: #4776AF;
}
JavaScript

$(function() {
$('.topbtn').click(function(){
$('.btm').show();
$('.topbtn').css('visibility', 'hidden');
});
$('.btmbtn').click(function(){
$('.btm').hide();
$('.topbtn').css('visibility', 'visible');
});
});
$(function() {
$('.topbtn2').click(function(){
$('.btm2').show();
$('.topbtn2').css('visibility', 'hidden');
});
$('.btmbtn2').click(function(){
$('.btm2').hide();
$('.topbtn2').css('visibility', 'visible');
});
});
Result

サンプルデモ

3. slideToggle()を使った後ろに続く要素に重ねるタイプのトグルボタン
HTML

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


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


<div class="container">
<div class="top">
<p>listen,<br>
overlook,<br>
voice,<br>
effort.</p>
<span class="topbtn">More ≫</span>
<!--top--></div>
<div class="btm-wrap">
<div class="btm">
<div class="btm-inner">
<p>相手のいいたいことをきいてあげようという思いやり。<br>
相手の悪いところを大目にみてあげようという寛大さ。<br>
自分の気持ちや心を言葉で表すこと。<br>
あきらめずお互いに努力すること。</p>
<!--btm-inner--></div>
<!--btm--></div>
<!--btm-wrap--></div>
<div class="top">
<p>listen, overlook, voice, effort. listen, overlook, voice, effort.</p>
<span class="topbtn2">More ≫</span>
<!--top--></div>
<div class="btm-wrap">
<div class="btm2">
<div class="btm-inner">
<p>相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。</p>
<!--btm-inner--></div>
<!--btm2--></div>
<!--btm-wrap--></div>
<!--container--></div>
CSS

.container {
  margin: 0 auto;
  text-align: left;
}
.container .top {
  padding: 10px 10px 0 10px;
  background: #fff;
}
.container .btm-wrap {
  position: relative;
}
.container .btm-wrap .btm {
  position: absolute;
  z-index: 2;
  opacity: 0.9;
  filter: alpha(opacity=90);
  background: #fff;
  display: none;
}
.container .btm-wrap .btm2 {
  position: absolute;
  z-index: 1;
  opacity: 0.9;
  filter: alpha(opacity=90);
  background: #fff;
  display: none;
}
.container .btm-wrap .btm .btm-inner,
.container .btm-wrap .btm2 .btm-inner {
  padding: 0 10px 10px 10px;
}
.container .top .topbtn {
  text-align: left;
  display: block;
  width: 80px;
  margin: 0;
  cursor: pointer;
  color: #4776AF;
}
.container .top .topbtn2 {
  text-align: center;
  display: block;
  width: 80px;
  margin: 0 auto;
  cursor: pointer;
  color: #4776AF;
}
JavaScript

$(document).ready(function(){
var flg = 'close';
$('.topbtn').click(function(){
$('.btm').slideToggle('fast');
if(flg == 'close'){
flg = 'open';
$(this).text('≪ Close');
}else{
flg = 'close';
$(this).text('More ≫');
}
});
});
$(document).ready(function(){
var flg = 'close';
$('.topbtn2').click(function(){
$('.btm2').slideToggle('fast');
if(flg == 'close'){
flg = 'open';
$(this).text('≪ Close');
}else{
flg = 'close';
$(this).text('More ≫');
}
});
});
Result

サンプルデモ

4. slideToggle()を使った後ろに続く要素に重ねないタイプのトグルボタン
HTML

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


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


<div class="container">
<div class="top">
<p>listen,<br>
overlook,<br>
voice,<br>
effort.</p>
<span class="topbtn">More ≫</span>
<!--top--></div>
<div class="btm">
<p>相手のいいたいことをきいてあげようという思いやり。<br>
相手の悪いところを大目にみてあげようという寛大さ。<br>
自分の気持ちや心を言葉で表すこと。<br>
あきらめずお互いに努力すること。</p>
<!--btm--></div>
<div class="top">
<p>listen, overlook, voice, effort. listen, overlook, voice, effort.</p>
<span class="topbtn2">More ≫</span>
<!--top--></div>
<div class="btm2">
<p>相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。</p>
<!--btm2--></div>
<!--container--></div>
CSS

.container {
  margin: 0 auto;
  text-align: left;
}
.container .top {
  padding: 10px 10px 0 10px;
  background: #fff;
}
.container .btm,
.container .btm2 {
  padding: 0 10px 10px 10px;
  background: #fff;
  display: none;
}
.container .top .topbtn {
  text-align: left;
  display: block;
  width: 80px;
  margin: 0;
  cursor: pointer;
  color: #4776AF;
}
.container .top .topbtn2 {
  text-align: center;
  display: block;
  width: 80px;
  margin: 0 auto;
  cursor: pointer;
  color: #4776AF;
}
JavaScript

$(document).ready(function(){
var flg = 'close';
$('.topbtn').click(function(){
$('.btm').slideToggle('fast');
if(flg == 'close'){
flg = 'open';
$(this).text('≪ Close');
}else{
flg = 'close';
$(this).text('More ≫');
}
});
});
$(document).ready(function(){
var flg = 'close';
$('.topbtn2').click(function(){
$('.btm2').slideToggle('fast');
if(flg == 'close'){
flg = 'open';
$(this).text('≪ Close');
}else{
flg = 'close';
$(this).text('More ≫');
}
});
});
Result

サンプルデモ

関連リンク

【Labs】CSSだけで要素の表示非表示
【Labs】JavaScriptで要素の表示非表示

【Labs】マウスオーバーでボタンの画像が変わるロールオーバー 【Labs】CSSだけでドロップダウンメニュー
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村