その他■開閉幕１１　一発開閉

■ボタンをクリックすると画像が消え、再度クリックで表示されます。

◆全ソース◆最初は開いてる
ソースの中をどこでも左クリックで『すべて選択』→右クリックで『コピー』を指定。ソースエリアの外をクリックすると『すべて選択』は消えます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>その他■開閉幕１１　一発開閉</title>

<!--★ここからコピー-->
<style type="text/css">
<!--
#don{
background:#ccf;/*★開閉領域の背景色　水色*/
padding:10px;/*★開閉領域と中身の余白*/
text-align:center;/*★開閉領域の中身の中央配置指定*/
}
.btS{margin-left:100px;}/*★開閉ボタンの位置指定*/
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->
<input type="button" value="画像開閉" onclick="open_close();return false;" title="クリックで閉じる。再クリックで開く" class="btS">
<!--★↓最初から見えるように、style="display:block;"を指定-->
<div id="don" style="display:block;">
<!--★↓開閉幕の中身。divではなくimgでもpでも可-->
<div style="width:90%; height:300px; background:#f00;"></div>
</div>

<script type="text/javascript">
<!--
/*=============================================================
tableの行開閉 By　http://never-ever.info/modules/news/index.php?page=article&storyid=397　　
★tableの行の開閉をdivに変更　2015/02/03
=============================================================*/
//■最初は開いてる
function open_close(){
   if (don.style.display=="block") {don.style.display="none"} else {don.style.display="block"}
}
//-->
</script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

◆全ソース◆最初は閉じている
ソースの中をどこでも左クリックで『すべて選択』→右クリックで『コピー』を指定。ソースエリアの外をクリックすると『すべて選択』は消えます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>その他■開閉幕１１　一発開閉</title>

<!--★ここからコピー-->
<style type="text/css">
<!--
#don{
background:#ccf;/*★開閉領域の背景色　水色*/
padding:10px;/*★開閉領域と中身との余白*/
text-align:center;/*★開閉領域の中身の中央配置指定*/
}
.btS{margin-left:100px;}/*★開閉ボタンの位置指定*/
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->
<input type="button" value="画像開閉" onclick="close_open();return false;" title="クリックで開く。再クリックで閉じる" class="btS">
<!--★↓最初から見えないように、style="display:none;"を指定-->
<div id="don" style="display:none;">
<!--★↓開閉幕の中身。divではなくimgでもpでも可-->
<div style="width:90%; height:300px; background:#00f;"></div>
</div>

<script type="text/javascript">
<!--
/*=============================================================
tableの行開閉 By　http://never-ever.info/modules/news/index.php?page=article&storyid=397　　
★tableの行の開閉をdivに変更　2015/02/03
=============================================================*/
//■最初は閉じてる
function close_open(){
   if (don.style.display=="none") {don.style.display="block"} else {don.style.display="none"}
}
//-->
</script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

とても短いソースなのにスゴイことのできるJavaScriptが、私は大好きです。
原本はtableの行を消したり出したりするJavaScriptなのですが、divで作成した空間を消したり出したりできるように改造しました。
デッカイ画像も、だらだら長いテキストエリアも、ボタン一発で手品のように消すことができます。
最初から中身が表示されているパターンと、最初は閉じているパターンの２通りあります。
このページのJavaScriptのソース自体も、この一発開閉のボタンで表示してみました。

当サイトのソースをコピペする方法としては、いままでのように小さい方がいいか、今回のようにデカい方がいいか考え中です。もしご意見があれば、「連絡」の方からお知らせください。
なければ、次回からはいままでどおりに小さい方でいこうと思います。大きい方でいきます。

なお、見本のソースには画像もテキストエリアも入っていません。divで作った赤と青の四角が表示されます。中身は自分の画像などを入れてみて下さい。
原本はNEVER★EVERから。

開閉幕１１ 一発開閉 最終修正日 : 2015/02/05

　開閉幕１１　一発開閉　　　　最終修正日 : 2015/02/05