HTML要素を折りたたんでクリックで動的に開閉するJavaScript…複数設置可能

「jQuery」を使った HTML 要素の開閉の記事はこちらです…

 「jQuery」「jQuery UI」第５回「Effects/Slide」ボタンクリックでコンテンツを開閉

 jQuery UI Extra-5 : HTML要素のマウスホバー時に光源がカーソルに追従するエフェクト


★・。。・゜゜・。。・☆・。。・゜゜・。。・★・。。・゜゜・。。・☆

ニュース系のブログで引用記事を書いたり…

経済系のブログで表を書いたり…

テクニカル系のブログでソースコードを書いたり…

音楽系のブログで動画を埋め込んだり…などなど…

…記事が長くなってしまう事って…結構あるでしょ

そんな時…引用部分やソースコード部分が…

折りたたまれていて…ボタンクリックなどで…

ページ移動無しで開閉出来たら…

先ずは全体をザッと読んで把握してから…

引用部分やソースコード部分をジックリ確認する…

ってな読み方ができて…お便利です…

そもそも…「ソースはコチラ」や「続きはコチラ」的な…

ページ移動させられるのが嫌いなんです…

まぁ…ブログでよく見る「続きを読む…」にしても…

再読み込みしたり…記事全文ページに移動したり…

全文ページで続きから表示されたり…と…

ブログの仕様により様々です…

重いサイトだと…ウンザリです…

なので…HTMLを弄れるブログならば…

どのブログにでも導入できて…

ボタンやサムネイル画像のクリックで…サクッと…

折りたたまれていた HTML 要素が開閉できる JavaScript です…

勿論…同一ページに複数設置ができます…

難点は…JavaScript オフの来訪者に…

なんの配慮もしていない事です…

「style="display:none"」を使っていますので…

クリックしても何も要素が表示されません…(￣ー￣)邪笑

配慮したい場合は…「<noscript>」などで…

同一の代替要素を記述しておく必要があります…

先ずは…サンプルを色々と弄ってみて下さい…

[0]

[1]

Example for Collapse / Text_line1
Example for Collapse / Text_line2
Example for Collapse / Text_line3

[2]

1. Example for Collapse / Ordered List_line1
2. Example for Collapse / Ordered List_line2
3. Example for Collapse / Ordered List_line3

[3]

Example for Collapse / Blockquote_line1
Example for Collapse / Blockquote_line2
Example for Collapse / Blockquote_line3

[4]

Example for Collapse / Text_line1
Example for Collapse / Text_line2
Example for Collapse / Text_line3

Example for Collapse / Multiple-Blockquote2_line1
Example for Collapse / Multiple-Blockquote2_line2
Example for Collapse / Multiple-Blockquote2_line3

[5]

[6]

[7]

<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>

[8]

戸田政康(T氏)から民主党議員への政治献金
 
年度
 
古川元久
 
枝野幸男
 
野田佳彦
 
小宮山洋子
 
手塚仁雄
 
原口一博
 
 
平成15年
 
110.000
 
120.000
 
0
 
0
 
0
 
1.000.000
 
 
平成16年
 
120.000
 
120.000
 
0
 
0
 
0
 
120.000
 
 
平成17年
 
120.000
 
120.000
 
10.000
 
0
 
0
 
120.000
 
 
平成18年
 
0
 
120.000
 
0
 
0
 
66.000
 
120.000
 
 
平成19年
 
100.000
 
120.000
 
0
 
0
 
102.000
 
120.000
 
 
平成20年
 
120.000
 
200.000
 
0
 
20.000
 
118.000
 
120.000
 
 
平成21年
 
120.000
 
120.000
 
0
 
0
 
118.000
 
120.000
 
 
平成22年
 
120.000
 
0
 
0
 
0
 
118.000
 
120.000
 
 
合計
 
810.000
 
920.000
 
10.000
 
20.000
 
522.000
 
1.840.000
 

開閉する HTML 要素の CSS は…

なるべくシンプルに記述しています…

当然ながら…実装すると…ご自身の CSS が反映されます…

JavaScript を準備します…

下記コードを「メモ帳」にコピペして…

<!--
function OC(a){if(document.getElementById(a).style.display=="none"){document.getElementById(a).style.display="block"}else{document.getElementById(a).style.display="none"}};
// -->

文字コードを「UTF-8」拡張子を「js」で…

任意の名前(例 : collapse.js)で保存し…

任意の場所にホストします…

 Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう

 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Google Drive」

 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Dropbox」

 Google Blogger用のファイル保存場所としてのGoogle sites/Picasa

外部ファイル化したくない方は…

ルートディレクトリに書いても OK です…

その場合は…このように書き換えて下さい…

<script type='text/javascript'>
ここに上記コードを挿入
</script>

 コメントを折りたたんでクリックで開閉表示…コメントの文字色と文字サイズも変更

外部ファイル化した方の書式は…

Blogger を利用の方は…
<script async='async' charset='utf-8' src='js ファイルの URL' type='text/javascript'/>
Blogger 以外を利用の方は…
<script async='async' charset='utf-8' src='js ファイルの URL' type='text/javascript'></script>

…と…ご自身の「js ファイルの URL」と差し替えてから記述します…

以下…記事中でのマークアップ方法を…

個別に見ていきますが…基本は…

<a href="javascript:;" onclick="OC('固有の id')">ボタンや画像の表記</a>
開閉させる HTML 要素のタグに「id="固有の id" style="display:none"」を記述

…ってだけです…

尚…長くなってしまうので…

コードの説明上不必要な部分は省略してあります…

[0] ボタン / 指定した HTML 要素を全て開閉する…

記事頭や記事終わりに設置して一括で開閉するためのボタンです…

[0] ボタンのコード…設定した任意の「id」を「,」で区切って全て記述…

<a href="javascript:;" onclick="OC('collapse0'),OC('collapse1'),OC('collapse2'),OC('collapse3'),OC('collapse4'),OC('collapse5'),OC('collapse6'),OC('collapse7'),OC('collapse8')"><button id="button" style="font-size: 12px; font-weight: bold;" title="全ての要素をクリックで開閉します">Example for Collapse / <span style="color: red;">Toggle All</span></button></a>

[1] ボタン / テキストを開閉する…

「div」タグで括ってテキストを記述し…
「id="固有の id" style="display:none"」は「div」タグに記述します…

[1] ボタンのコード…任意の「id」は「collapse0」を設定…

<a href="javascript:;" onclick="OC('collapse0')"><button id="button" style="font-size: 12px; font-weight: bold;" title="テキストをクリックで開閉します">Example for Collapse / Text</button></a>
<div id="collapse0" style="display:none">
Example for Collapse / Text_line1
Example for Collapse / Text_line2
Example for Collapse / Text_line3
</div>

[2] ボタン / 順序付きリストを開閉する…

「div」タグで括る必要はありません…
「id="固有の id" style="display:none"」は「ol」タグに記述します…

[2] ボタンのコード…任意の「id」は「collapse1」を設定…

<a href="javascript:;" onclick="OC('collapse1')"><button id="button" style="font-size: 12px; font-weight: bold;" title="順序付きリストをクリックで開閉します">Example for Collapse / Ordered List</button></a>
<ol id="collapse1" style="display:none">
<li>Example for Collapse / Ordered List_line1</li>
<li>Example for Collapse / Ordered List_line2</li>
<li>Example for Collapse / Ordered List_line3</li>
</ol>

[3] ボタン / 引用を開閉する…

「div」タグで括る必要はありません…
「id="固有の id" style="display:none"」は「blockquote」タグに記述します…

[3] ボタンのコード…任意の「id」は「collapse2」を設定…

<a href="javascript:;" onclick="OC('collapse2')"><button id="button" style="font-size: 12px; font-weight: bold;" title="引用をクリックで開閉します">Example for Collapse / <span style="color: blue;">Blockquote</span></button></a>
<blockquote id="collapse2" style="display:none">
Example for Collapse / Blockquote_line1
Example for Collapse / Blockquote_line2
Example for Collapse / Blockquote_line3
</blockquote>

[4] ボタン / ２つの異なる要素を開閉する…

それぞれに「固有の id」を設定して…
「id="固有の id" style="display:none"」も２箇所に記述します…

[4] ボタンのコード…任意の「id」は要素を２つ開閉させるので…
「collapse3」と「collapse4」を「,」で区切って設定…

<a href="javascript:;" onclick="OC('collapse3'),OC('collapse4')"><button id="button" style="font-size: 12px; font-weight: bold;" title="２つの異なる要素をクリックで開閉します">Example for Collapse / <span style="color: blue">Multiple</span></button></a>
<div id="collapse3" style="display:none">
Example for Collapse / Multiple-Text_line1
Example for Collapse / Multiple-Text_line2
Example for Collapse / Multiple-Text_line3
</div>
<blockquote id="collapse4" style="display:none">
<span style="color: #8AC75A;">Example for Collapse / Multiple-Blockquote2_line1
Example for Collapse / Multiple-Blockquote2_line2
Example for Collapse / Multiple-Blockquote2_line3</span>
</blockquote>

[5] ボタン / 動画埋め込み Player を開閉する…

「id="固有の id" style="display:none"」は…
「object」タグにも直接書けますが…
行間の幅が崩れて綺麗に整列しませんので…
「div」タグで括る事を推奨します…
動画の説明なども書けますからね…

[5] ボタンのコード…任意の「id」は「collapse5」を設定…

<a href="javascript:;" onclick="OC('collapse5')"><button id="button" style="font-size: 12px; font-weight: bold;" title="YouTube の埋め込み Player をクリックで開閉します">Example for Collapse / <span style="color: green;">Video-object</span></button></a>
<div id="collapse5" style="display:none">
<object…(中略)…>
…(中略)…
</object>
</div>

[6] ボタン / 埋め込み iframe を開閉する…

[5] と同一の動画ですが…
埋め込み方法とリンク方法を変えています…
サムネイル画像クリックでの動画埋め込み iframe の開閉です…
「id="固有の id" style="display:none"」は…
iframe には書けませんので…
「div」タグで括って記述します…

[6] 画像のコード…任意の「id」は「collapse6」を設定…

<a href="javascript:;" onclick="OC('collapse6')"><img alt="Google Chrome, Japan" border="0" height="96" width="128" src="サムネイル画像の URL" title="YouTube の埋め込み iframe をクリックで開閉します" /></a>
<div id="collapse6" style="display:none">
<iframe…(中略)…></iframe>
</div>

[7] ボタン / 整形済みテキストを開閉する…

「div」タグで括る必要はありません…
「id="固有の id" style="display:none"」は「pre」タグに記述します…

[7] ボタンのコード…任意の「id」は「collapse7」を設定…

<a href="javascript:;" onclick="OC('collapse7')"><button id="button" style="font-size: 12px; font-weight: bold;" title="整形済みテキストをクリックで開閉します">Example for Collapse / <span style="color: #F15B55;">Pre</span></button></a>
<pre id="collapse7" style="display:none">
…(中略)…
</pre>

[8] ボタン / 表(テーブル)を開閉する…

「div」タグで括る必要はありません…
「style="display:none"」は「table」タグに記述しますが…
必要に応じて「pre」タグで括って記述して下さい…

[8] ボタンのコード…任意の「id」は「collapse8」を設定…

<a href="javascript:;" onclick="OC('collapse8')"><button id="button" style="font-size: 12px; font-weight: bold;" title="表をクリックで開閉します">Example for Collapse / <span style="color: #F15B55;">Table</span></button></a>
<table id="collapse8" style="display:none"…(中略)…>
…(中略)…
</table>

以上ですが…

同一ページ内で複数の要素を開閉する場合…

任意の「id」は…固有である必要がありますので…

お間違え無きように…

尚…実装では…

通常リンクと区別するために…

このような…

マウスの ON / OFF で切り替える(ロールオーバー)画像を…

リンクボタンに付与しています…

 Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】

Design jQuery jQuery / Extra Current-Label : JavaScript