コンテンツブロックの表示／非表示を切り替える方法

はじめに

サイトの画面の一部にメニュー等の表示で、リンクをクリックするごとに表示／非表示を切り替える技法をよく見ます。
そこでこれらを「javascript」と「php」で処理する方法についてご紹介します。上級者の方は読みとばしてください（備忘録）。

コンテンツの表示／非表示の切り替え方はサイトで多く紹介されており、その手法等も様々のようです。そちらの技術情報も参考にされるとよいかと思います。

本稿のソースコードはサンプルです。また、htmlのコードまで書きましたので実行プロセスもより分かりやすかと思います。

実行環境

「XAMPP」Webアプリケーションを利用します。
フリーソフトで、ローカル環境で「PHP」や「Perl」の動作確認をすることができます。

「XAMPP」は構築済として説明は省略します。

「XAMPP」は未構築で初めてという方は、以下から配布されていますのでダウンロードして下さい。

https://www.apachefriends.org/jp/

ディレクトリ構成

作成するファイルは、XAMPPアプリケーションが標準で指定している「htdocs」フォルダ内に保存して下さい。
これでローカル環境でのプログラムの動作を確認することができます。

              📁xampp														
                |
               📁htdocs
                 |
                📁samplefolder
                  |	
                  sample.php
                  index.html												
                  📁js
                    |	
                    sampleAjax.js
                    content_switch.js
                    content_hide.js

phpで切り替え表示するコンテンツブロックを作る

作成するコンテンツの中身はテキスト文でも画像でも構いません。

sample.php

<?php							
 print '
   <div style="line-height:1.5;margin-top:10px;padding-right:30px;border:1px solid #FF0000;">
   	<ul>
   	  <li><a href="http://www.msn.com/ja-jp/" target="_blank">MSN Japan - ニュース, 天気, メール (Outlook, Hotmail)......</a></li>
   	  <li><a href="https://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a></li>
   	  <li><a href="https://www.goo.ne.jp/" target="_blank">goo</a></li>
   	  <li><a href="https://www.google.co.jp/" target="_blank">Google</a></li>
   	</ul>
   </div>
 ';
?>

Ajax通信を使ってコンテンツブロックを取得する

前述で作成したコンテンツブロックを、Ajax通信を使ってサーバーから「POST」方式で取得をします。

sampleAjax.js

              window.onload = init;
              function init() {
                // ブラウザの判定 
                if (window.XMLHttpRequest) {
                	// インスタンスを作成
                	var xmlhttp = new XMLHttpRequest();
                } else {
                	alert("IEバージョン7.0以上のブラウザをご利用ください！。");
                	return null;
                }      
                // アドレスへ接続開始
                xmlhttp.open("POST","sample.php",true);
                
                // 通信完了で関数を呼び出し
                xmlhttp.onreadystatechange = function(e) {
                	// 通信が正常終了か
                	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                		// サーバーからデータを取得して表示するhtmlファイルのid属性に設定
                		document.getElementById("contentDsp").innerHTML = xmlhttp.responseText;
                	}
                }        
                // ヘッダー
                /* POST送信のときsendメソットに引数を設定しない場合は、必要ないが
                * ブラウザによっては送信エラーが生じる恐れがあるようです。
                * なるべく設定して置いた方が良いようです。
                */
                xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
                xmlhttp.send();               
              }

コンテンツブロックの表示／非表示を切り替える

表示するリンクをクリックする毎に、表示／非表示を行う。

content_switch.js

              //表示切り替え関数
              function block_switch(bs) {
                if (document.getElementById(bs).style.display == "block") {
                	document.getElementById(bs).style.display = "none";
                } else {
                	document.getElementById(bs).style.display = "block";
                }
              }

任意の領域をクリックするとコンテンツブロックを非表示に

JavaScriptライブラリのjQueryを利用して非表示を実行するJSファイルです。
利用するjQueryファイルは、CDN経由で読み込むことにします（html参照）。

content_hide.js

              // クリック位置が#contentLinkの領域外なら#contentIdを非表示	
              $(document).click(function(e) {
                if(!$.contains($('#contentLink')[0], e.target)){
                	$('#contentId').hide();
                }
              });

html

index.html

              <!DOCTYPE html>
              <html  lang="ja">
              <head>
              <meta charset="utf-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge" />
              <TITLE>コンテンツブロックの表示／非表示を切り替えるサンプルプログラム</TITLE>
              <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
              <script type="text/javascript" src="js/content_hide.js"></script>
              <script type="text/javascript" src="js/content_switch.js"></script>
              <script type="text/javascript" src="js/sampleAjax.js"></script>
              </head>
              <body>
              <div id="container" style="z-index: 1; position: relative; height: 580px; border:1px solid #333;">
              <table border="0">
              <tr>
              <th>
              <div style="text-align:left;font-size:1.8rem;background:#F4F4F4;padding:8px;">コンテンツブロックの表示／非表示を切り替えるサンプルプログラム</div>
              <div style="text-align:left;padding:5px;">表示状態でリンク領域外をクリックすると非表示。</div><br /><br />
              </th>
              </tr>
              </table>
              <br />
              <table border="0" style="z-index: 2; position: absolute; left:10px; background:#FFF;">
              <tr>
              <td>
              <div id="contentLink"><a href="javascript:void(0)" onclick="block_switch('contentId');">ContentBlockView</a></div>
              </td>
              </tr>
              <tr>
              <td>
              <!--起動時は非表示-->
              <div id="contentId" style="display:none;">
              	<div id="contentDsp"></div> <!--Ajax通信で取得したコンテンツブロックを表示-->
              </div>
              </td>
              </tr>
              </table>
              <br /><br /><br />
              <table border="0">
              <tr>
              <td>
              <div style="margin-left:10px;padding:20px;background:#F4F4F4;">
              CSSで「Z-INDEX」プロパティを使用して、コンテンツブロックの表示順位を、他の

              テキスト・画像等のコンテンツより上位にして、上に重ねるように表示をしています。
              </div>
              </td>
              </tr>
              </table>
              </div><!--end container-->
              <footer>
              Copyright © コンテンツブロックの表示／非表示を切り替えるサンプルプログラム
              </footer>
              </body>
              </html>

実行

それでははじめに、Webサーバーを起動します。

「xampp」ディレクトリに「xampp-control.exe」という各種サーバーを管理するファイルがあります。
このファイルをダブルクリックして「XAMPP Controll Panel」を開いて下さい。

開いたパネルに「Apache」があります。これがWebサーバーです。
「Start」ボタンを押して「Apache」を起動させます。

起動が正常か確認してから、ブラウザを開いてURL欄に以下のようにアドレスを入力します。
http://localhost/samplefolder/index.html

どうでしょうか、問題なく動作するか確認して下さい。