問題
高さに応じてmoreボタンを表示させるには？
解決策
要素にcssで高さを設定し、その高さと実際のコンテンツの高さと比較してコンテンツの高さの方が上の場合、表示させる。
moreボタンの表示基準を高さで行う。
moreボタンを設定する際、様々な条件がありますが、今回は要素の高さに応じてmoreボタンを表示させる方法をご紹介します。
DEMOはこちら
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
HTMLはこちら
<div class="heightmoretext">
<p class="text">テキストテキストテキストテキストテキストテキスト</p>
<p class="text">テキストテキストテキストテキストテキストテキスト</p>
<p class="text">テキストテキストテキストテキストテキストテキスト</p>
<p class="text">テキストテキストテキストテキストテキストテキスト</p>
<p class="text">テキストテキストテキストテキストテキストテキスト</p>
<p class="text">テキストテキストテキストテキストテキストテキスト</p>
<p class="text">テキストテキストテキストテキストテキストテキスト</p>
</div>CSSはこちら
.heightmoretext{
height: 100px;
overflow: hidden;
}
.heightmorebtn{
text-align: center;
}ポイント!
クラス「heightmoretext」に対して、height（高さ）と「overflow: hidden;」を設定します。
今回は例として高さを100pxに設定しています。
設定した高さから、実際の要素の内容が溢れている場合、moreボタンを表示する。
cssで設定した高さより、実際の要素の内容の高さの方が上の場合、クラス「heightmorebtn」＋その中のaタグであるmoreボタンを表示させます。
var i = 0;
var default_height = "";
var w = $(window).width();
$('.heightmoretext').each(function() {
var scrollH = $('.heightmoretext').get(i).scrollHeight;
var offsetH = $('.heightmoretext').get(i).offsetHeight;
var hiddenH = scrollH - offsetH;
if(hiddenH > 0){
$(this).parent().append('<p class="heightmorebtn btn-type01 type_vt"><a href="#">続きを見る</a></p>');
}
default_height = parseInt($(this).css('height'),10);
i++;
});- 「default_height = parseInt($(this).css(‘height’),10);」で、閉じている状態の要素の高さを記録しておきます。
| scrollHeight | 画面上に表示されていないコンテンツを含む要素の内容の高さの数値。 |
|---|---|
| offsetHeight | 要素のborder、padding、水平スクロールバーと要素のCSSのheightを合計した数値。 |
moreボタンをクリックした時の処理。
moreボタンとして作成したクラス「heightmorebtn」の中のaタグに、クリックイベントを設定します。
$(".heightmorebtn a").click(function() {
event.preventDefault();
if( $(this).hasClass('active') ){
txt_height = default_height;
new_txt_height = txt_height;
$(this).text('続きを見る');
$(this).closest('.heightmorebtn').removeClass('vt02');
}else{
txt_height = parseInt($(this).closest('.heightmorebtn').siblings(".heightmoretext").css('height'),10);
scrollH = $(this).closest('.heightmorebtn').siblings(".heightmoretext").get(0).scrollHeight;
offsetH = $(this).closest('.heightmorebtn').siblings(".heightmoretext").get(0).offsetHeight;
hiddenH = scrollH - offsetH;
new_txt_height = txt_height + hiddenH;
$(this).text('折りたたむ');
$(this).closest('.heightmorebtn').addClass('vt02');
}
$(this).closest('.heightmorebtn').siblings(".heightmoretext").animate({ height: new_txt_height}, 500 );
$(this).toggleClass('active');
});- moreボタンにクラス「active」が付いているかどうかで開閉処理を分岐させています。
- moreボタンにクラス「active」が付いていない場合、開く処理をしてクラス「active」を付けます。
- moreボタンにクラス「active」が付いている場合、閉じる処理をしてクラス「active」を取ります。
- 開く処理は現在の高さ＋隠れている分の高さの合計した数値を、クラス「heightmoretext」に再設定します。
- 閉じる処理は上記で最初に記録しておいた、元々の設定された高さの数値「default_height」を、クラス「heightmoretext」に再設定します。
一連の処理の記述例
上記を元にした、一連の処理の記述例はこちらになります。
var i = 0;
var default_height = "";
var w = $(window).width();
$('.heightmoretext').each(function() {
var scrollH = $('.heightmoretext').get(i).scrollHeight;
var offsetH = $('.heightmoretext').get(i).offsetHeight;
var hiddenH = scrollH - offsetH;
if(hiddenH > 0){
$(this).parent().append('<p class="heightmorebtn btn-type01 type_vt"><a href="#">続きを見る</a></p>');
}
default_height = parseInt($(this).css('height'),10);
i++;
});
$(".heightmorebtn a").click(function() {
event.preventDefault();
if( $(this).hasClass('active') ){
txt_height = default_height;
new_txt_height = txt_height;
$(this).text('続きを見る');
$(this).closest('.heightmorebtn').removeClass('vt02');
}else{
txt_height = parseInt($(this).closest('.heightmorebtn').siblings(".heightmoretext").css('height'),10);
scrollH = $(this).closest('.heightmorebtn').siblings(".heightmoretext").get(0).scrollHeight;
offsetH = $(this).closest('.heightmorebtn').siblings(".heightmoretext").get(0).offsetHeight;
hiddenH = scrollH - offsetH;
new_txt_height = txt_height + hiddenH;
$(this).text('折りたたむ');
$(this).closest('.heightmorebtn').addClass('vt02');
}
$(this).closest('.heightmorebtn').siblings(".heightmoretext").animate({ height: new_txt_height}, 500 );
$(this).toggleClass('active');
});
$(window).resize(function(){
if( w > 640 && $(window).width() <= 640 ){
resize_reset();
}
if( w <= 640 && $(window).width() > 640 ){
resize_reset();
}
function resize_reset(){
$('.heightmoretext').css({
'height': default_height
});
$('.heightmorebtn').removeClass('vt02');
$('.heightmorebtn a').text('続きを見る');
$('.heightmorebtn a').removeClass('active');
}
w = $(window).width();
});参照
以下のサイトが、より詳しく解説してくれています。
【jQuery 指定の高さを超えたらボタンを表示 | 使えるUIサンプルギャラリー kipure】
https://www.kipure.com/article/130/
コメント