コンテンツを開閉できる『もっと見るボタン』をつくりました【javascript/jQuery】

ウェブページで、途中まで文章が表示されていて『もっと見る』ボタンをクリックすると、残りのコンテンツが表示される動きがあります。

今回、リストなどの長いコンテンツを開閉できるボタンをjavascriptで実装したのでメモ。

2024年1月1日追記
素のJavaScriptで同じ動きを実装しました。こちらの方が動作が安定していてオススメです。

▼JavaScript（Vanilla JavaScript）版はこちら

完成した『もっと見る』ボタンを確認する
ソースコードを確認
まとめ

完成した『もっと見る』ボタンを確認する

こちらが完成した動作です。最初、コンテンツの一部が表示されていて、『もっと見る』ボタンをクリックするとすべて表示されます。

動作デモ

実際の動作はこちらでご確認ください！（別ウィンドウが開きます）

「もっと見る」ボタンのサンプル | えむ家のメモ帳

ソースコードを確認

デザインとアニメーションはCSS、ボタンをクリックした時の動作はjavascript（jQuery）で実装しました。
作成手順のポイントをメモしておきます。

ページの構造をHTMLで作る

コンテンツが開閉して伸び縮みするのは「showmore_list」の部分です。ここにリストなどの長いテキストがあるとします。

『もっと見る』ボタンは一番下に設置します。
ボタンの文字は、コンテンツの開閉で変更するので、HTMLで直接記載せずCSSの疑似要素で表示させます。

<section class="showmore_wrap">
    <div class="showmore_list">
        <p class="main_ttl">リスト一覧</p>
        <div class="list_box">
            <!-- ここにリストなどの長いコンテンツ -->
        </div>
    </div><!-- /showmore_list -->
    <!-- ▼『もっと見る』ボタン -->
    <div class="list_toggle">
        <a href="javascript:void(0);" class="open_link"></a>
    </div>
</section><!-- /showmore_wrap -->

CSSでアニメーションやレイアウトに関する設定をする

伸び縮みするコンテンツのレイアウトとアニメーションの設定

「showmore_list」に、CSSでレイアウトとアニメーションに関する設定をします。

.showmore_list {
    border: 3px solid #999;
    border-radius: 10px;
    padding: 20px;
    overflow: hidden;
    font-size: .8rem;
    line-height: 1.6;
    transition: all .3s ease-in;
}

ほどんど装飾に関する指定ですが、以下２点は必ず設定します。

コンテンツを閉じた状態で、中のテキストが外にはみ出さないよう「overflow:hidden」を指定。
アニメーションさせるため「transition: all .3s ease-in」を指定。

『もっと見る』ボタンの設定

『もっと見る』ボタンは、コンテンツの開閉で表示を変更します。
クラスの名前によって、異なる文字を表示するようにします。

尚、コンテンツの開閉によるクラスの変更はjavascriptで実装します。

 .list_toggle a.open_link:before {
    content: "リストをもっと見る ▼";
    display: inline;
}

.list_toggle a.close_link:before {
    content: "リストを閉じる ▲";
    display: inline;
}

javascriptでコンテンツを閉じた状態の高さを設定する

ページが読み込まれたとき、リストは閉じた状態で表示されるようにします。
表示部分はリスト全体の30％の高さにします。

まず、開いた状態のコンテンツ全体の高さを取得して、その値に0.3をかけます。
そうすると全体の30％の値になるので、初期の高さに設定します。

let showmoreList = $('.showmore_list');
let showmoreListOpen = parseInt(showmoreList.height());
let showmoreListClose = parseInt(showmoreList.height() * 0.3);

//初期値
showmoreList.css('height', showmoreListClose + 'px');

『もっと見る』ボタンをクリックしたら、各要素に指定しているクラスを変更する

コンテンツの高さ以外の表示は、各要素に設定されているCSSクラスを変更することで実装します。

「open_link」・「close_link」のどちらのクラスが設定されているかで、各要素のクラスを変更します。
『もっと見る』ボタンをクリック時、次のようにクラスを設定します。

ボタンに「open_link」クラスが設定されていれば削除。
「open_link」の代わりに「close_link」クラスを追加し、親要素「list_toggle」に「close_area」クラスを追加。
伸び縮みするコンテンツ「showmoreList」に、最初に取得した開いた状態のコンテンツ全体の高さを指定します。

「close_link」クラスが設定されていた場合、逆の動作を設定します。
「close_link」の代わりに「open_link」を設定し、親要素「list_toggle」の「close_area」クラスを削除します。
「showmoreList」には、コンテンツ全体の30％の高さを指定します。

$('.list_toggle a').click(function () {
    let thisBtn = $(this);
    showmoreTop = showmoreList.offset().top

    if ($(this).hasClass('open_link')) {
        thisBtn
            .removeClass('open_link')
            .addClass('close_link')
            .parent().addClass('close_area');
        showmoreList
            .css('height', showmoreListOpen + 'px');

    } else if ($(this).hasClass('close_link')) {
        thisBtn
            .removeClass('close_link')
            .addClass('open_link')
            .parent().removeClass('close_area');
        showmoreList
            .css('height', showmoreListClose + 'px');
    }
});