amazonモバイルサイトの「レビュー全文を読む」の動きを作ってみる

本家と全く同じやり方ではないですが、こういうやり方もあるかな、というところを書いておきます。
ポイントは「レビュー全文を読む」をクリックすると改行されてレビューが読みやすくなるというところでしょう。

まず文章内のbrタグをdisplay:noneで削除して、改行を詰めておき「レビュー全文を読む」をクリックした時に、brタグにdisplay:blockをあてて改行を戻します。
具体的には以下のサンプルを御覧ください。

サンプルはこちら

ちなみに本家ではbrタグのある展開した時用の文章とbrタグのない省略用の文章の両方が用意されているようです。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中