「続きを読む」展開ボタン

解説

長い本文を最初の数行だけ見せ、ボタンで全文を開く「続きを読む」UI です。隠したい段落に rm-hidden クラスを付けて display:none にしておき、ボタンのクリックで本文ラッパーに is-open を付け外しします。開いた状態では is-open .rm-hidden の指定により隠し段落が表示され、@keyframes rm-fi で軽くフェードしながら現れます。ボタンの文言も開閉に合わせて「続きを読む」「閉じる」と切り替わり、状態が一目で分かるようにしています。純粋な表示切替なので動作は軽く、追加の読み込みもありません。

使う場面と調整

記事のプレビュー、商品の詳細説明、規約や注意書きの折りたたみなど、初期表示を短くしたい場面に向きます。最初に見せる量は、どの段落に rm-hidden を付けるかで自由に調整できます。注意点として、検索エンジンは display:none の内容も読み取れますが、重要な情報を最初から隠しすぎると読者が気づかない恐れがあります。アクセシビリティを高めるなら、ボタンに開閉状態を伝える aria-expanded を付け、操作で内容が増えたことを支援技術へ知らせると親切です。