Written by Kasumi

【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クラスが付与されていたら削除します。

以上で実装完了です。

まとめ

本文を透過グラデーションで隠して、もっと見るボタンで開閉するアコーディオンを実装する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptの配列で条件一致する要素だけ抽出する方法【filterメソッドを使おう】

2023.01.04
6885
JavaScript

マウスでホバー出来る端末以外はCSSで装飾した:hoverを無効にする方法【メディアクエリで解決】

2022.12.27
6049
JavaScript

JavaScriptで配列とオブジェクトを比較。重複した値を持つ要素だけ取得する方法

2022.12.24
2880
JavaScript

JavaScriptでブラウザにデータを保存する方法【Local Storageを使おう】

2022.11.19
4411