【CSS・JS】本文を透過グラデーションで隠して、もっと見るボタンで開閉するアコーディオンを実装する方法
本文を透過グラデーションで隠す。
もっと見るボタンをクリックでグラデーションを解除。
開閉するアコーディオンを実装したい。
本記事ではこのような悩みを解決。
実装方法について解説します。
実装サンプル
See the Pen
もっと見るグラデーション by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
もっと見るボタンをクリックで透過グラデーションが解除。
本文が全部表示されます。
閉じるボタンをクリックすると元に戻ります。
実装手順は以下の通りです。
HTMLを用意
<div>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<button>もっと見る</button>
</div>
まずはHTMLで本文・ボタンを用意します。
本記事では例として、pタグで本文。
もっと見るボタンをbuttonタグにします。
ボタンと本文の要素を隣同士で配置してください。
CSSで装飾
/* 本文を隠す高さを指定 */
p {
position: relative;
height: 100px;
overflow: hidden;
}
/* もっと見るボタンで高さを自動に */
p.active {
height: auto;
}
/* 透過グラデーションをposition指定 */
p::before {
content: "";
width: 100%;
height: 100%;
display: block;
background: linear-gradient(rgba(255, 255, 255, 0) 0, #fff 90%);
position: absolute;
top: 0;
left: 0;
}
/* もっと見るボタンで透過グラデーションを解除 */
p.active::before {
background: none;
}
次にCSSで装飾します。
本文要素（pタグ）にheightで任意の高さ・overflow: hidden;を指定。
指定した高さ以上のコンテンツは切り取りします。
本文要素にbefore疑似要素を指定。
positionで本文の上に重ねます。
backgroundのlinear-gradient関数を使って透過グラデーションをbefore疑似要素に指定します。
activeクラスが付いたら、本文要素の高さ指定を解除・透過グラデーションも解除するように指定します。
JavaScriptで開閉アコーディオンにする
//もっと見るボタン要素
const moreBtn = document.querySelector('button');
//クリックしたら
moreBtn.addEventListener('click', () => {
//もっと見るボタンの隣の要素を取得（本文）
const prev = moreBtn.previousElementSibling;
//activeクラスを付与・解除
if(prev.classList.contains('active') === true) {
prev.classList.remove('active');
moreBtn.textContent = 'もっと見る';
}else{
prev.classList.add('active');
moreBtn.textContent = '閉じる';
}
});
最後にJavaScriptで開閉アコーディオンを作成します。
addEventListener関数を使って、もっと見るボタンのクリックイベントを取得。
クリックしたらもっと見るボタンの隣の要素（本文）にactiveクラスを付与。
既にactiveクラスが付与されていたら削除します。
以上で実装完了です。
まとめ
本文を透過グラデーションで隠して、もっと見るボタンで開閉するアコーディオンを実装する方法について紹介しました。
以上で解説を終わります。