テキスト量が多い場合の「…続きを読む」の実装方法(ページ遷移無し、cssのみ)

Amazonの口コミ等で、
書き込みの量が一定を超えると「…続きを読む」というリンクが表示され、
クリックするとページ遷移をすることなく続きが表示されるようになる機能がある。
今回はその実装方法を色々まとめてみた。

ページ遷移はしない方がいいかもしれない。

「〇〇でもっと詳細を見る」のようなリンクを付けている場合があるが、
SEO的な観点から、あまりよくないかもしれない。
というのも、以下のような記事がある。
https://webtan.impress.co.jp/e/2017/02/10/25011
個人的には、スクロール量を減らしてくれるので気にならないのだが、
Googleの主要メンバーには不快感を示している人もいる模様。
とはいえ、不快感を感じない人も一定数以上いること、
「ページビューを露骨に増やそうとしている」というところが問題だと思うので、
ページ遷移をしなければ問題ないと思う。

cssでやってみる。

前回の記事と、以前の記事を応用して作ってみる。

実際に作ってみたものはこれ。

See the Pen 続きを読む by blue (@aoiBlue) on CodePen.0

やっていることはcheckboxを使ってリンク（のように見せているもの）のクリックを検知し、
それによって要素を出し入れしている、というだけ。
前回のものを使っているのでレスポンシブにも地味に対応しています。

閉じることもできる。

さらにこれを応用して、閉じることも可能。
口コミだと特に使う場面は思いつかないけど、
超長文のコンテンツなんかで使うかもしれない。

実装したものが以下。

See the Pen 続きを読む、閉じる by blue (@aoiBlue) on CodePen.0

ラベルの文字列を疑似要素の中に入れて、
checked状態かどうかで内容を変えるというもの。

cssはクリックされたかどうかの検知が難しいが、
checkbox等を使えば、一応全てクリックされてからcssが変わるようなイベントはjQuery無しで実装出来る気がする。
（なんでもCSSでやればいいってものでもないと思うので、
そこは臨機応変にやらないといけない気がするが。）

そしてcssの何よりも難しいのが、
ブラウザ依存があるということ。
chrome、safariという主要ブラウザだけでもいくつか相違がある。
特にsafariのinput系は独自のレイアウトがすごいので、
appearance: none;してあげないと高確率でchromeとは違うものになってしまうので注意したい。

今回の実装も、chromeでしか動かしてないので、
もしかすると他のブラウザだととんでもないことになっているかもしれない。