menu
menu

キーワード検索

 

前月(11月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 5 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  7. ( 9 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 8 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. (10 ↑) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
このエントリーをはてなブックマークに追加

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

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

こんにちは(・∀・)

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

JavaScriptでブロック要素の表示非表示

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

<div class="container">
<div class="top">
<p>listen,<br>
overlook,<br>
voice,<br>
effort.</p>
<p id="topbtn"><a href="javascript:void(0)" onclick="objectopen(); return false;">More ≫</a></p>
<!--top--></div>
<div class="btm-wrap">
<div id="btm">
<div class="btm-inner">
<p>相手のいいたいことをきいてあげようという思いやり。<br>
相手の悪いところを大目にみてあげようという寛大さ。<br>
自分の気持ちや心を言葉で表すこと。<br>
あきらめずお互いに努力すること。</p>
<p id="btmbtn"><a href="javascript:void(0)" onclick="objectopen(); return false;">≪ Close</a></p>
<!--btm-inner--></div>
<!--btm--></div>
<!--btm-wrap--></div>
<div class="top">
<p>listen, overlook, voice, effort. listen, overlook, voice, effort.</p>
<p id="topbtn2"><a href="javascript:void(0)" onclick="objectopen2(); return false;">More ≫</a></p>
<!--top--></div>
<div class="btm-wrap">
<div id="btm2">
<div class="btm-inner">
<p>相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。</p>
<p id="btmbtn2"><a href="javascript:void(0)" onclick="objectopen2(); return false;">≪ Close</a></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 {
  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 objectopen(){
showobj('btm');
return false;
}
function showobj(obj) {
var box = document.getElementById(obj);
var btn1 = document.getElementById('topbtn');
if( box.style.display != "block" ) {
box.style.display = "block";
btn1.style.visibility = "hidden";
} else {
box.style.display = "none";
btn1.style.visibility = "visible";
}
}
function objectopen2(){
showobj2('btm2');
return false;
}
function showobj2(obj2) {
var box2 = document.getElementById(obj2);
var btn2 = document.getElementById('topbtn2');
if( box2.style.display != "block" ) {
box2.style.display = "block";
btn2.style.visibility = "hidden";
} else {
box2.style.display = "none";
btn2.style.visibility = "visible";
}
}
Result

サンプルデモ

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

<div class="container">
<div class="top">
<p>listen,<br>
overlook,<br>
voice,<br>
effort.</p>
<p id="topbtn"><a href="javascript:void(0)" onclick="objectopen(); return false;">More ≫</a></p>
<!--top--></div>
<div id="btm">
<p>相手のいいたいことをきいてあげようという思いやり。<br>
相手の悪いところを大目にみてあげようという寛大さ。<br>
自分の気持ちや心を言葉で表すこと。<br>
あきらめずお互いに努力すること。</p>
<p id="btmbtn"><a href="javascript:void(0)" onclick="objectopen(); return false;">≪ Close</a></p>
<!--btm--></div>
<div class="top">
<p>listen, overlook, voice, effort. listen, overlook, voice, effort.</p>
<p id="topbtn2"><a href="javascript:void(0)" onclick="objectopen2(); return false;">More ≫</a></p>
<!--top--></div>
<div id="btm2">
<p>相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。相手のいいたいことをきいてあげようという思いやり。相手の悪いところを大目にみてあげようという寛大さ。自分の気持ちや心を言葉で表すこと。あきらめずお互いに努力すること。</p>
<p id="btmbtn2"><a href="javascript:void(0)" onclick="objectopen2(); return false;">≪ Close</a></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 {
  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 objectopen(){
showobj('btm');
return false;
}
function showobj(obj) {
var box = document.getElementById(obj);
var btn1 = document.getElementById('topbtn');
if( box.style.display != "block" ) {
box.style.display = "block";
btn1.style.visibility = "hidden";
} else {
box.style.display = "none";
btn1.style.visibility = "visible";
}
}
function objectopen2(){
showobj2('btm2');
return false;
}
function showobj2(obj2) {
var box2 = document.getElementById(obj2);
var btn2 = document.getElementById('topbtn2');
if( box2.style.display != "block" ) {
box2.style.display = "block";
btn2.style.visibility = "hidden";
} else {
box2.style.display = "none";
btn2.style.visibility = "visible";
}
}
Result

サンプルデモ


関連リンク

【CSS3】CSSだけで要素の表示非表示
【jQuery】jQueryで要素の表示非表示

  • JavaScript ブロック要素
このエントリーをはてなブックマークに追加