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

ウェブページでリストなどの長いコンテンツを開閉できるボタンをJavaScriptで実装しました。

具体的には、コンテンツが途中まで表示されていて『もっと見る』ボタンをクリックすると、続きのコンテンツが表示される動きです。

以前jQueryで同じ動きを実装しましたが、今回は素のJavaScript（Vanilla JavaScript）で作成しました。

▼jQuery版はこちら

完成した『もっと見る』ボタンを確認する
1. 『もっと見る』ボタンの機能
使用方法
ボタンのテキストとデザインの変更
まとめ

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

こちらがコード全体です。CSSでコンテンツ開閉のアニメーションやボタンの色を設定し、JavaScriptでコンテンツ開閉の高さと表示に関するクラス名を制御しています。

See the Pen show-more-ver02 by donguri2020 (@m-ke) on CodePen.

最初にコンテンツの一部が表示されていて『もっと見る』ボタンをクリックするとすべて表示されます。

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

動作デモ

デモを確認する

『もっと見る』ボタンの機能

コンテンツの開閉以外に、次の機能を実装しました。

『もっと見る』ボタンを上部、下部どちらでも表示可能
『もっと見る』コンテンツを１ページに複数設置可能
『もっと見る』コンテンツの初期表示の高さを調整可能
『もっと見る』コンテンツをPCだけ、またはSPだけに反映可能
ヘッダー分の高さを調節可能　※ボタンを下部に設置した場合
CSSのプレフィックスの変更が可能

使用方法

まず、show_moreのJavaScriptとCSSをダウンロードし、『もっと見る』を設置したいページに読み込みます。

show_more.cssはこちら（show_more.css：2KB）
show_more.jsはこちら（show_more.js：9KB）

<link rel="stylesheet" type="text/css" href="./show_more.css" />
<script src="./show_more.js"></script>

※ファイルのパスは環境によって変更してください。

class=”showmore_wrap”を設定した要素でコンテンツを囲む

『もっと見る』を設定したいコンテンツをshowmore_wrapクラスの要素で囲みます。

<div class="showmore_wrap">
  ...コンテンツ
</div>

JavaScriptで”ShowMore”オブジェクトを実行する

JavaScriptのnew演算子でShowMoreオブジェクトをインスタンス化します。
load イベントで全てのコンテンツの読み込みが完了してから実行するのがポイントです。

window.addEventListener('load', () => {
  const showmore = new ShowMore();
});

これで『もっと見る』ボタンを実装できます。

ShowMoreオブジェクトのオプション

オプションで様々な値を設定できます。
初期値は以下の通りとなります。

window.addEventListener('load', () => {
  const showmore = new ShowMore({
    selector : ".showmore_wrap", //セレクタ
    prefix : "shm", // CSSのプレフィックス
    displayShowHeightPc : 0.3, //閉じた状態の要素の高さ（PC）
    displayShowHeightSp : 0.2, //閉じた状態の要素の高さ（SP）
    closeBtnPosition : "bottom", // 閉じるボタンの表示位置（bottom | top）
    offsetYPc : 0, //ヘッダー分高さを調整（PC）
    offsetYSp : 0, //ヘッダー分高さを調整（SP）
    showPc : true, // PCでもっと見るを実装
    showSp : true, // SPでもっと見るを実装
    });
});

よく使いそうなオプションの使い方をメモしておきます！

閉じた状態の高さを設定

コンテンツを閉じた状態の高さをPC版、SP版それぞれに設定できます。

window.addEventListener('load', () => {
  const showmore = new ShowMore({
    displayShowHeightPc : 0.3, //閉じた状態の高さを全体の高さの30%に設定（PC）
    displayShowHeightSp : 0.2, //閉じた状態の高さを全体の高さの20%に設定（SP）
    });
});

『もっと見る』コンテンツ全体の高さから、閉じた状態の高さを割合で表示します。
初期値はPC版が0.3、SP版が0.2です。この場合、PC版の閉じた高さは全体の高さの30%になり、SP版は20%です。

オプションに設定できる値は小数点で、20%なら0.2、50%なら0.5です。

『もっと見る』ボタンの表示位置を設定

『もっと見る』ボタンの位置をコンテンツの上下、どちらかに設定できます。
オプションに設定できる値はbottomかtopの文字列で、初期値はbottomです。

window.addEventListener('load', () => {
    const showmore = new ShowMore({
    closeBtnPosition : "bottom", // 閉じるボタンの表示位置（bottom | top）
    });
});

『もっと見る』ボタンを下に表示（デフォルト）

『もっと見る』ボタンを上に表示

ヘッダー分の高さを調整

主にボタンを下に配置しているときに発生しますが、コンテンツを閉じた時、思った通りの位置にスクロールが移動しない時があります。

ページの作りによりますが、主にヘッダーをpositionのfixedで固定している場合に多く見られます。
そのような時は、コンテンツのスクロール位置を調整することができます。

window.addEventListener('load', () => {
    const showmore = new ShowMore({
        offsetYPc : 90, //PCのヘッダー分高さを90px調整（PC）
        offsetYSp : 60, //SPのヘッダー分高さを60px調整（SP）
    });
});

PC版、SP版それぞれに値を設定できます。初期値は0で設定できる値は数値のみです。
※単位のpxは必要ありません。

ボタンのテキストとデザインの変更

ボタンのデザインはCSSを編集することで変更できます。
また、ボタンのテキストもCSSで設定しているので好きな内容に変更することができます。

ボタンの表示関するCSSは以下の部分です。こちらのコード変更すればボタンのデザインとテキストを変更することができます。

/* ボタンの表示 */
.shm_btn button {
  width: 30%;
  color: #fff;
  border: 2px solid;
  border-radius: 50px;
  display: block;
  font-weight: bold;
  padding: 12px 0;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.3s ease-in;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .shm_btn button {
    width: 100%;
    box-sizing: border-box;
  }
}

.shm_btn.shm_position--bottom button:hover,
.shm_btn.shm_position--top button:hover {
  opacity: 0.7;
}

.shm_btn button.shm_btnTxt--open {
  background: #ec8c0f;
}

.shm_btn button.shm_btnTxt--close {
  background: #188015;
}

.shm_btn button.shm_btnTxt--open:before {
  content: 'もっと見る ▼';
  display: inline;
}

.shm_btn button.shm_btnTxt--close:before {
  content: '閉じる ▲';
  display: inline;
}

カスタマイズした例は以下のデモから確認できます！

デモを確認する