「続きを読む」ボタンを押すと全文が表示されるしくみ

特にニュースサイトでよく見かけるのですが、テキストの全文が長いときに初めは数行のみ表示しておき「続きを読む」あるいは「全文表示」、「詳細表示」といったリンクボタンを押すとサッと全文が現れるというしくみを自サイトでも実現したいと考えています。

文章が部分表示されている最初のページが01a.htmlだとしてボタンを押すと全文が記載されている01b.htmlが表示されるというしくみではどうやらなく、ソースを見るとJavascriptを使っているのでしょうか、あらかじめ用意してあった<div>～</div>がボタンクリックで表示されるらしいのです。

当方のサイトにおいてこのしくみを実現したいページ数がけっこうあり、いちいちaページ、bページを用意するとファイル数が倍になるので「別ファイルを用意する」という方法は避けたい。

実現する方法を具体的にご教授ください。
※<div>タグにはこだわりません。

参考URL
http://headlines.yahoo.co.jp/hl?a=20071116-00000 …

No.1 ベストアンサー 回答者： noname#44015 回答日時： 2007/11/17 11:01

参考URL内にあったHTMLを読んでみると

http://i.yimg.jp/lib/news/yjnews_util_1_4.js
というスクリプトがリンクされていました．

そこで続きを読む部分のdivタグのidであるfoldLinkを上記スクリプト内で検索すると，
以下の部分が関係ありそうです．

function yjNfold_init() {
var artObj = yjNgetElement("artFold");
if (artObj) {
artObj.style.display = "none";
}
var linkObj = yjNgetElement("foldLink");
if (linkObj) {
var linkHtml = '<a href="#" onClick="yjNfold_change(' + "'op'" + ');return false">[続きを読む]</a>';
linkObj.innerHTML = linkHtml;
}
}

function yjNfold_change(state) {
var artObj = yjNgetElement("artFold");
if (artObj) {
if (state == 'op') {
artObj.style.display = "block";
} else if (state == 'cl') {
artObj.style.display = "none";
}
}

var linkObj = yjNgetElement("foldLink");
if (linkObj) {
var linkHtml = '';
if (state == 'op') {
linkHtml = '<a href="#" onClick="yjNfold_change(' + "'cl'" + ');return false">[記事を折りたたむ]</a>';
} else if (state == 'cl') {
linkHtml = '<a href="#" onClick="yjNfold_change(' + "'op'" + ');return false">[続きを読む]</a>';
}
linkObj.innerHTML = linkHtml;
}
}


どうやら[続きを読む]，[記事を折りたたむ]のリンクを押した場合にcssのdisplayプロパティを
blockとnoneで変化させているようです．
http://www.seo-equation.com/html/css/display