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

wrote : 2008.01.26

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;
}

クリックしないと見えないコンテンツに、id属性「OpenConts」を指定する。
クリックするとコンテンツが開くようにする箇所にaタグを、そのaタグにonclick属性「openConts();」を指定する。
クリックするとコンテンツが閉じるにする箇所にaタグを、そのaタグにonclick属性「openConts();」を指定する。

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

まずは満足。

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

javascript未対応やcss未対応への配慮が足りない（アクセシビリティ、ユーザビリティ面での問題）

cssでコンテンツを非表示にし、javascriptで表示・非表示のコントロールをしている。そのため、javascriptが未対応であれば、cssでコンテンツを非表示にしたコンテンツを閲覧することができなくなってしまう。クリックしても何の変化もないのに「クリックすると、コンテンツが開く」「クリックすると、コンテンツが閉じる」というテキストが表示されているのはいかがなものか。
「id」属性を指定している（運用面での問題）

1ページにコンテンツを開いたり閉じたりするパーツを複数用意したい場合は、パーツの数だけid属性を名前を変えて用意する必要がある（html、css、javascriptの3ファイルすべてが対象）。更新作業でコンテンツを開いたり閉じたりするパーツを用意する場合もやはり3ファイルの更新が必要であり、管理が面倒である。

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とは違う）。

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

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

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

ページ内にid属性「OpenConts」が必ず存在することを前提にスクリプトが書かれている。

(x)htmlファイル内で、id属性「OpenConts」を削除した場合、その箇所のスクリプトも削除しなければいけないが、それを忘れてしまうとスクリプトエラーになってしまう。
仮にすでにid属性「OpenConts」にすでにclass属性がある場合、class属性「OpenConts」を上書いてしまうのだ。
window.onloadを使用しているが、スクリプトがこれだけなら問題ないが、ページがロードされた際に実行する他のファンクションへの配慮がない。

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