DOMを使ったjavascript「続きを読む」（表示／非表示 切替え）初期値変更について

質問

以下は拾ってきたもので、
長い文章の途中に「続きを読む」などと入れて
内容を隠しておくのに使えるものだと思いますが、
設置してみたところ初期値で表示状態になっています。
これを非表示にするには
どの値を変更すれば良いでしょうか。
javascriptの知識がないので、教えて下さい。

// イベントリスナーの追加
function addEvent(node, evt, func) {
if (node.addEventListener) {
node.addEventListener(evt, func, false);
}
else if (node.attachEvent) {
node.attachEvent("on" + evt, func);
}
}

// イベントがあった要素を得る
function getTarget(e) {
if (e.target) {
return e.target;
}
else if (e.srcElement) {
return e.srcElement;
}
}

// イベントリスナーの割り当て
function setHandler() {
// 文書内のdiv要素を列挙する
var divElements = document.getElementsByTagName('div');
for (var i = 0; i < divElements.length; i++) {
// div要素の直下の階層にあるh4要素を得る
var h4Element = divElements[i].getElementsByTagName('h4')[0];
// h4要素のclickイベントにイベントリスナーを割り当てる
addEvent(h4Element, "click", showHide);
}
}

// h4要素と同じ階層にあるp要素の表示／非表示を切り替える
function showHide(e) {
// クリックされたh4要素を得る
var h4Element = getTarget(e);
// h4要素と同じ階層にあるp要素を得る
var parent = h4Element.parentNode;
var pElement = parent.getElementsByTagName('p')[0];
// p要素の表示／非表示を切り替える
pElement.style.display = (pElement.style.display == 'none')
? '' : 'none';
}

// イベントリスナーを割り当てる
addEvent(window, "load", setHandler);

回答No.2

auty · ベストアンサー

＞＞＞　設置してみたところ初期値で表示状態になっています。
これを非表示にするには
どの値を変更すれば良いでしょうか。

初期値はJavaScriptを利用しなくても大丈夫です。

非表示にしたいpタグを非表示にしておけばよいだけです。

例

<div>
<h4>
AAAAAAAAAAA
</h4>
<p style="display: none">
PPPPPPPPPPPPPPPPPPP
</p>
</div>
IE と Firefox で確認しました。

お礼

一発でできました。
大変助かりました。どうもありがとうございます。
デフォルト表示の変更はjavascriptを使うまでもなく、
スタイル指定すればよいのですね。勉強になりました。

回答No.1

VCAT

一部のブラウザでしか動かないけどそれはわかってる？

補足

ブラウザの対応について理解していません。
ただ、上記のスクリプトは19行目まで
IEとそれ以外のブラウザで処理を分けていると
説明があったので、使えるかなと思いましたが・・・。
甘いでしょうか？

そもそも同じ事をDOMを使わずにできるのか。
javascriptだから対応ブラウザが限られるのか、
DOMを使っているから対応ブラウザが限られるのか。
そのあたりもわかっていません。