「記事の折りたたみ・展開」について教えてください。

「記事の折りたたみ・展開」について教えてください。
折りたたみ時に、文章が一定の文字数、もしくは規定の高さを超える場合、途中まで表示して文末を「...」と省略し、”続きを見る”というリンクをクリックしたら、記事が展開されて本来の文章が見えるようにしたいのですが、参考になるＵＲＬ等ございましたら教えてください。

No.1 ベストアンサー 回答者： 23468 回答日時： 2012/01/27 17:16

CSSで

http://builder.japan.zdnet.com/html-css/sp_css-f …

jQueryで
http://blog.e-riverstyle.com/2011/10/jquery-7.html

この回答へのお礼

こういうやり方もあったんですね。すごく参考になります！
ありがとうございます。

お礼日時：2012/02/03 14:14

No.2 回答者： ORUKA1951 回答日時： 2012/01/28 01:53

様々なアプローチがあると思います。

・新聞社のサイトのように、記事の冒頭部分だけを表示して、・・続きを読む・・をクックして記事全部を記述したページへリンクする方法
　SSP--サーバーサイドでプログラムを実行して動的にページを作っています。写真や記事がある程度の長さを持っている場合に良いでしょう。記事自体をブックマークできますし、なによりも句読点や段落などできちんと区切れる。

・googleのニュース検索などで使われている方法で、javascriptやajaxが使われています。ajaxだと動作は速いでしょうが・・
　→記事 折りたたみ - Google 検索 ( http://www.google.co.jp/#hl=ja&gs_is=1&cp=8&gs_i … )
　→記事 折りたたみ 　ajax - Google 検索 ( http://www.google.co.jp/#sclient=psy-ab&hl=ja&so … )

・CSSだけで行う。javascriptなどを使わずに可能ですし、SEO的にも優れています。
下記のような率直なHTMLのままでよいかと・・
<div class="section">
<h2>「記事の折りたたみ・展開」について教えてください。</h2>
<p>「記事の折りたたみ・展開」について教えてください。</p>
<p>折りたたみ時に、文章が一定の文字数、もしくは規定の高さを超える場合、途中まで表示して文末を「...」と省略し、”続きを見る”というリンクをクリックしたら、記事が展開されて本来の文章が見えるようにしたいのですが、参考になるＵＲＬ等ございましたら教えてください。</p>
</div>

・CSSとjavascriptの併用・・

この回答へのお礼

min-heightをクリックイベントで有効無効にする形式をとりました。
ありがとうございます。

お礼日時：2012/02/03 14:13