文章が多めのニュース記事なんかでよくある、「もっと見る」ボタンをクリックすると詳細が表示される動きをjQueryで作ってみました。
テキストの一部をCSSのグラデーションで覆って、続きがあることを明示しています。
サンプル
See the Pen もっと見るでスライド表示 by ponzu (@ponzu) on CodePen.
html
<div class="content-wrap animated">
<div class="content-txt">
<p>この中にもっと見るで表示させたいテキストを入れる</p>
</div>
<div class="more-btn”>
<p class="open">もっと見る</p>
</div>
</div>
jQuery
3〜5行目は「もっと見る」ボタンをクリックした時に .open というクラス名がついていたら、スライドダウンさせてボタンを「閉じる」ボタンに変更します。
6〜8行目は、ボタンが「閉じる」の状態だったら、ボタンを「もっと見る」に変更してスライドアップさせています。
$(function() {
$('.more-btn').on('click', function() {
if( $(this).children().is('.open') ) {
$(this).html('<p class="close">閉じる</p>').addClass('close-btn');
$(this).parent().removeClass('slide-up').addClass('slide-down');
} else {
$(this).html('<p class="open">もっと見る</p>').removeClass('close-btn');
$(this).parent().removeClass('slide-down').addClass('slide-up');
}
});
});
CSS
CSSでは、以下を指定してます。
・テキストをグラデーションで隠す
・ボタンをクリックした時のテキストの表示、非表用スライドアニメーション
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideDown {
0% {
opacity: 1;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideDown {
0% {
opacity: 1;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.slide-down {
-webkit-animation-name: slideDown;
animation-name: slideDown;
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes slideUp {
0% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.slide-up {
-webkit-animation-name: slideUp;
animation-name: slideUp;
}
.content-wrap {
height: 150px;
overflow: hidden;
position: relative;
margin: 0;
}
.close-btn, .more-btn {
display: block;
width: 100%;
padding: 80px 0 0;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
background: -moz-linear-gradient(
top,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 60%
);
background: -webkit-linear-gradient(
top,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 60%
);
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 60%
);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#00ffffff',
endColorstr='#ffffff',
GradientType=0
);
}
.close-btn {
background: none;
}
.slide-up {
height: 150px;
padding-bottom: 0;
overflow: hidden;
}
.slide-down {
height: auto;
overflow: visible;
padding-bottom: 50px;
}
.more-btn p {
display: inline-block;
color: #fff;
cursor: pointer;
background: #29B6F6;
padding: 5px 20px;
width: 80%;
border-radius: 20px;
}
.close-btn {
padding:0;
}
.close-btn p {
background: #aaa;
}