【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 = 'もっと見る';
        }
    });
});

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

最後に

もっと見るは、そのまま表示するには情報過多のものであったり、全体のバランスが悪くなるコンテンツ等を読み込み時に一部的に非表示にしておく際に使用するテクニックです。

制作者目線では、もっと見るを採用することでデザインに沿ったバランスの良いページに仕上げることができるため、色々なサイトで実装されています。しかしユーザーによってはストレスを感じる方が一定数いらっしゃいますので、メリット・デメリットを天秤にかけて導入を検討していただければと思います。

以上、JavaScriptで、グラデーションで隠して「もっと見る」で開閉するコンテンツを実装する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら