コンテンツ量が多い場合だけ折りたたみ表示する
2023-08-07 14:49
コンテンツ量が多い時だけ自動的に折りたたまれ、「もっと見る」ボタンが表示することができます。
対応テンプレ: レスポンシブテンプレート / スマホ版HTML5テンプレート / PC版HTML5固定幅テンプレート
内容テキストを簡単なdivタグで囲むだけで表示できます。
htmlタグサンプル
折り畳む初期値の高さは200pxです。内容のテキストが200pxを超えた場合、「もっと見る」ボタンを表示し折り畳みます。
<div class="elastic_folding_area">
内容のテキスト
</div>
内容のテキスト
</div>
内容の高さが100pxを超えると折り畳むようにする場合
class名を指定することで、折り畳む高さの値を変更できます。
class名は、max_h_100～max_h_400までご用意しています。
class名は、max_h_100～max_h_400までご用意しています。
<div class="elastic_folding_area max_h_100">
内容のテキスト
</div>
内容のテキスト
</div>
| クラス名 | 適用される折り畳む高さ |
| max_h_100 | 100px 以上の高さで折りたたみ(max-height: 100px;) |
| max_h_200 | 200px 以上の高さで折りたたみ(max-height: 200px;) |
| max_h_300 | 300px 以上の高さで折りたたみ(max-height: 300px;) |
| max_h_400 | 400px 以上の高さで折りたたみ(max-height: 400px;) |
data属性 一覧
| data属性一覧 | ||
| data-more-label | 機能 | 「もっと見る」のラベルを別のものに変更する場合に指定 |
| 初期値 |
"もっと見る" | |
| data-breakpoint | 機能 | 840 の指定がある場合、画面読み込み時に画面幅が指定幅以上の場合は常に折りたたまない (pxの数値) (※840 以外の値にする場合、別途メディアクエリ付きのCSS指定の追加が必要) |
| 初期値 |
"null" | |
もっと見るのラベル変更サンプル
<div class="elastic_folding_area" data-more-label="全て表示">
内容のテキスト
</div>
内容のテキスト
</div>
画面読み込み時に画面幅が840px以上の場合は常に折りたたまない
<div class="elastic_folding_area" data-breakpoint="840">
内容のテキスト
</div>
内容のテキスト
</div>