【JavaScript】グラデーションで隠して「もっと見る」で開閉するコンテンツ

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでもっと見るのコンテンツをグラデーションで隠して表示する方法をご紹介しています。

コンテンツをグラデーションで隠して「もっと見る」のボタンで開閉させるにはどうすればいいんだろう？

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

もっと見るをクリックすると、グラデーションで隠れているコンテンツを開閉して表示します。下記に動作確認用のデモを用意しましたので、ボタンをクリックして開閉する動きを確かめてみてください。

See the Pen 7474 by ryohei (@intotheprogram) on CodePen.

本記事では、開閉するコンテンツをテーマにしているため、開いた後に閉じる動作を組み込んでいます。開くだけで良い場合は、もっと見るボタンをクリックした後にボタンの要素自体をremoveなどで削除するなどしてご利用ください。

HTMLでレイアウトを作成する

HTMLでレイアウトから作成していきます。moreを1つのブロックとし、子要素にコンテンツとボタンを持たせるように記述します。レイアウトは好みの方法で組んでいただいて構わないですが、本記事では下記でご紹介する内容でスタイルやスクリプトを組んでいますので、その点ご了承ください。

HTML

<div class="more">
    <div class="more__content">
        <!-- コンテンツ -->
    </div>
    <button class="more__btn">もっと見る</button>
</div>
<div class="more">
    <div class="more__content">
        <!-- コンテンツ -->
    </div>
    <button class="more__btn">もっと見る</button>
</div>

続いて作成したHTMLレイアウトにスタイルを定義します。

CSSでスタイルを定義する

コンテンツが開く前（コンテンツが透明と白のグラデーションで隠れている状態）と、開いた後（コンテンツの全体が表示されて透明と白のグラデーションが非表示になっている状態）のスタイルを定義します。

開く前のコンテンツには固定値で高さを設定します。開いた後はスクリプト側で実際のコンテンツの高さを設定するように後ほど処理を組んでいきます。コンテンツが開いた後にグラデーションは必要ないので、擬似要素の透明度を0にし、重なり順が下になるようにopenクラスにスタイルを定義しておきます。openクラスは、コンテンツが開いたときにmore__contentに追加するクラスになります。

CSS

.more {
    width: 46%;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 0px rgba(200, 200, 200, 1);
    box-sizing: border-box;
    
    //コンテンツ
    &__content {
        position: relative;
        height: auto;
        max-height: 200px; //高さは調整
        overflow: hidden;
        transition: max-height 1s; //開閉時間
        
        //コンテンツをグラデーションで隠す擬似要素
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            display: block;
            width: 100%;
            height: 100%;
            transition: 1s;
            background: linear-gradient(
                to bottom,
                transparent 0%,
                #ffffff 100%
            );
        }
        
        //コンテンツの開閉で追加・削除するクラス
        &.open {
            &:after {
                z-index: -1;
                opacity: 0;
            }
        }
    }
    
    //もっと見るボタン
    &__btn {
        display: block;
        margin: 0 auto;
        padding: 8px 40px;
        border: 0;
        color: #ffffff;
        background-color: #00c2bc;
        cursor: pointer;
    }
}

続いてJavaScriptでもっと見るをクリックした後の処理を組んでいきます。

JavaScript

JavaScriptでもっと見るのコンテンツが開閉する処理を組んでいきます。処理内容はコメントに記載していますので、参考にしていただければと思います。

const elements = document.querySelectorAll('.more');

Array.from(elements).forEach(function(el){

    //ボタンを取得
    const btn = el.querySelector('.more__btn');
    //コンテンツを取得
    const content = el.querySelector('.more__content');

    //ボタンクリックでイベント発火
    btn.addEventListener('click', function(){

        if(!content.classList.contains('open')){
            //コンテンツの実際の高さを代入
            //キーワード値（none、max-content等）では動作しないので注意
            content.style.maxHeight = content.scrollHeight + 'px';
            //openクラスを追加
            content.classList.add('open');
            //もっと見るボタンのテキストを設定
            btn.textContent = '閉じる';
        } else {
            //コンテンツの高さを固定値を代入
            content.style.maxHeight = '150px';
            //openクラスを削除
            content.classList.remove('open');
            //もっと見るボタンのテキストを設定
            btn.textContent = 'もっと見る';
        }
    });
});

ここまでご紹介した内容を実装すると、冒頭でご紹介したデモの内容が完成します。