クリックすると隠れたテキストなどが表示

最初５行くらいで、続きをよむ、といったリンクを
クリックすると隠れていた追加テキストが表示される
スクリプトをつくりたいのです。


http://e-words.jp/w/JavaScript.html
↑これが参考事例なんですが…
ソースを拝見すると
onclickで処理を行われているようですが……


ご存知の方よろしくお願いします。

No.3 ベストアンサー 回答者： taketan_mydns_jp 回答日時： 2007/10/19 16:57

とりあえず簡単なサンプルを。

タグ埋込みだけでもOKです。
/////////////////////////////////////
非表示の文字をdivで囲っておいて、初期値はスタイルシートでdisplay:none（非表示）にしておきます。続きをを読むをクリックすると、getElementById().style.displayで属性を変えて（display:bllock）表示するようにします。
<a href="#" onclick="document.getElementById('hoge').style.display='block';">続きを読む</a>
<div id="hoge" style="display:none;">続きはこちらです。クリックすると表示されます。</div>

No.2 回答者： is_may 回答日時： 2007/10/19 14:07

ソースを見てイベントハンドラの関数などを探せば出来る思いますけど・・。

<script language="javascript"><!--
function xReadMore(){
document.getElementById("morelink").style.display="none";
document.getElementById("more").style.display="block";
}
-->
</script> いろはにほへと ちりぬるを <a href="javascript:xReadMore();" id="morelink">続きを読む</a>
<div style="display:none;" id="more">わかよたれそ つねならむ</div>

No.1 回答者： dsuekichi 回答日時： 2007/10/19 11:55

> ソースを拝見すると

なら、お分かりでは？？？

追加テキスト部分をdisplyaスタイルをnoneにした<DIV>で括っておいて、
onClickで、スタイルをblockに変更しているだけですよね・・・
＃ついでに、続きをよむの方はnoneにして・・・