グラデーションで隠れている続きを読むmoreボタン

グラデーションで隠れている開閉ボタンのサンプルです。

ボタンだけ出ていて、コンテンツ全体を表示、非表示を切り替えるだけなら最悪show hideでいけますが、一部見せるとかだとそうはいきませんでした。


height auto だと、アニメーションが動作しないため、overflow: hidden; した要素の子要素で height: auto; osition: absolute; を指定し、jsで高さを取得できるようにします。

取得した高さは固定値になるので、その高さにむけてアニメーションさせることで実現しています。









sample

See the Pen グラデーションで隠れている続きを読むmoreボタン by takapen (@takapen) on CodePen.

html

more
more









more
more

css

/* とりあえず適当にリセット */
* {
  margin: 0;
  padding: 0;
}

div {
  margin: 20px;
  height: 100px;
  overflow: hidden;/*決めた高さまでで非表示*/
  transition: height .5s;/* 開閉アニメーション用 */
  position: relative;/*開閉ボタン固定配置の基準点用*/
}
ul {
  height: auto;/*全体の高さを取得するため*/
  position: absolute;/*全体の高さを取得するため*/
}
li {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  background: #ccc;
  list-style: none;
}
p {
  position: absolute;
  bottom: 0;
  left: 0px;
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #ccc 50%);/*グラデーションでかぶせる*/
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.js-close {
  display: none;
}

jQuery

$(function() {
  $('.js-open').on('click',function() {
    var contentHeight = $(this).parent('.div').find('.ul').height();/*それぞれの全体の高さを取得*/
    $(this).parent('.div').css('height',contentHeight+40);/*クリックされたら大枠の高さを変更*/
    $(this).hide();
    $(this).next(".js-close").show();
  });
  $('.js-close').on('click',function() {
    $(this).parent('.div').css('height','100px');/*閉じるときはシンプルに固定の高さに*/
    $(this).prev(".js-open").show();
    $(this).hide();
  });
});