となりの要素の表示状態を切り替える(+localStorageへ保存する)

開閉式メニューを実現するのに下記のようなコードをよく見かけるのですが

<a onclick="ChangeVisibleById('childId');">parent</a>
<div id="childId">child</div>

これだとchildIdが2箇所にあって嫌な感じです。

そこで、Visibilityを切り替える対象を隣の要素に限定して下記のようにしてみました。

<a onclick="ChangeVisibleNext(this);">parent</a>
<div>child</div>

こうすれば、どこへでもコピペ可能だしchildにidを書かなくて良いので可搬性バツグンです。

ちなみにChangeVisible~の実装はこんな感じです。

ついでにchild要素にidが指定されていたらVisibilityの値をlocalStorageに保存するようにしてみました。

var PREFIX = "visibility_";// 重複を防ぐためプレフィックスをつけとく(きやすめ)
var STORAGE_NAME="storage_name";// localStorageが使えない環境のためにLSTJSON(※)を使う場合
function ChangeVisible(obj)
{
	obj.style.display = (obj.style.display=="none")?"block":"none";
	if(obj.id) {
		localStorage[PREFIX+obj.id] = obj.style.display;
		LSTJSON.save(STORAGE_NAME);
	}
}
function ChangeVisibleById(id)
{
	var obj = document.getElementById(id);
	ChangeVisible(obj);
}
function ChangeVisibleNext(obj)
{
	do {
		obj = obj.nextSibling;
	} while(obj && obj.nodeType != 1);
	ChangeVisible(obj);
}
// localStorageからVisibilityを拾ってくる処理
function Load()
{
	LSTJSON.load(STORAGE_NAME);
	for(id in localStorage) {
		if(id.indexOf(PREFIX) == 0) {
			var obj = document.getElementById(id.substring(PREFIX.length));
			if(obj) {
				obj.style.display = localStorage[id];
			}
		}
	}
}

なお、htmlとhtaでnextSiblingの返すオブジェクトが違ったようなので、ChangeVisibleNextの実装にはこちらのサイトを参考にしました。
Finding HTML elements using Javascript nextSibling and previousSibling

(※)LSTJSONについてはこちら
htaでlocalStorageっぽいものを使えるようにしてみる