0から目指すWebマスター Web制作に関する備忘録
検索

JavaScript

コンテンツを開いたり閉じたりする

Level 1

(x)html
<p>
<a href=”#” onclick=”openConts();”>クリックすると、コンテンツが開く</a>
</p>
<div id=”OpenConts”>
<p>コンテンツテキスト、コンテンツテキスト、コンテンツテキスト、コンテンツテキスト、</p>
<p>
<a href=”#” onclick=”closeConts();”>クリックすると、コンテンツが閉じる</a>
</p>
</div>
css
#OpenConts{
 display:none;
 }
javascript
function openConts(){
 document.getElementById(“OpenConts”).style.display = “block”;
 return false;
 }
function closeConts(){
 document.getElementById(“OpenConts”).style.display = “none”;
 return false;
 }

たったこれだけで、コンテンツを開いたり閉じたりすることができるようになる。

まずは満足。

でもこのままではいくつか問題がある。

Level 2では、まず「javascript、css未対応への配慮」も視野に入れて考えよう。

Level 2

ポイントは、javascriptが有効でない場合、「クリックすると、コンテンツが開く」「クリックすると、コンテンツが閉じる」は表示されないようにすること。
こうすることで、反応のないリンクは排除することできる。また、コンテンツは常に開いた状態になるが、コンテンツが表示されないことによる情報の未伝達を防ぐことができる。

(x)html
<div id=”OpenConts”>
<p>コンテンツテキスト、コンテンツテキスト、コンテンツテキスト、コンテンツテキスト、</p>
</div>
css
.OpenConts{
 display:none;
 }
javascript

window.onload = OpenClose;
function OpenClose(){
 var OpenConts = document.getElementById(“OpenConts”);
 OpenConts.className = “OpenConts”;
 var partsOpen = document.createElement(“p”);
 var partsOpenText = document.createTextNode(“クリックすると、コンテンツが開く”);
 partsOpen.appendChild(partsOpenText);
 var partsParent = OpenConts.parentNode;
 partsParent.insertBefore(partsOpen,OpenConts);
 partsOpen.onclick = function(){
 document.getElementById(“OpenConts”).style.display = “block”;
 return false;
 }

 var partsClose = document.createElement(“p”);
 var partsCloseText = document.createTextNode(“クリックすると、コンテンツが閉じる”);
 partsClose.appendChild(partsCloseText);
 OpenConts.appendChild(partsClose);
 partsClose.onclick = function(){
 document.getElementById(“OpenConts”).style.display = “none”;
 return false;
 }
}

(x)htmlファイルを見て分かる通り、無駄な記述が削除されているが、ブラウザでの表示はLevel1とほぼ同じだ(上記の例ではリンク部分のスタイルがLevel 1とは違う)。

ちなみにスクリプトの流れは以下のとおり。

  1. id属性「OpenConts」を含むタグ(要素)を抽出
  2. そのタグ(要素)にclass属性「OpenConts」を追加(id属性「OpenConts」内が非表示になる)
  3. そのタグ(要素)の前に、「クリックすると、コンテンツが開く」パーツを作成
  4. そのパーツをクリックすると、id属性「OpenConts」内が表示されるようにする
  5. id属性「OpenConts」内の最後に「クリックすると、コンテンツが閉じる」パーツを作成
  6. そのパーツをクリックすると、id属性「OpenConts」内が非表示されるようにする

とはいえ、これでも万全とは言い難い。

これらに加え、Level 1でも指摘した運用面の問題がある。