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

質問

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

回答No.1

23468 · ベストアンサー

CSSで
http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20378240/2/

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

お礼

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

回答No.2

ORUKA1951

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

・googleのニュース検索などで使われている方法で、javascriptやajaxが使われています。ajaxだと動作は速いでしょうが・・
　→記事 折りたたみ - Google 検索 ( http://www.google.co.jp/#hl=ja&gs_is=1&cp=8&gs_id=1j&xhr=t&q=%E8%A8%98%E4%BA%8B+%E6%8A%98%E3%82%8A%E3%81%9F%E3%81%9F%E3%81%BF&pf=p&sclient=psy-ab&source=hp&pbx=1&oq=%E8%A8%98%E4%BA%8B+%E3%82%AA%E3%83%AA%E3%82%BF%E3%82%BF%E3%83%9F&aq=0r&aqi=g-r1g-mr3&aql=&gs_sm=&gs_upl=&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=f827a9af1eb2b0c5&biw=1016&bih=608 )
　→記事 折りたたみ 　ajax - Google 検索 ( http://www.google.co.jp/#sclient=psy-ab&hl=ja&source=hp&q=%E8%A8%98%E4%BA%8B+%E6%8A%98%E3%82%8A%E3%81%9F%E3%81%9F%E3%81%BF+%E3%80%80ajax&pbx=1&oq=%E8%A8%98%E4%BA%8B+%E6%8A%98%E3%82%8A%E3%81%9F%E3%81%9F%E3%81%BF+%E3%80%80ajax&aq=f&aqi=&aql=&gs_sm=e&gs_upl=3775l57531l1l58438l16l10l6l0l0l0l798l2630l0.6.3.6-1l16l0&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=f827a9af1eb2b0c5&biw=1016&bih=608 )

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

・CSSとjavascriptの併用・・

お礼

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