もっと見るボタンをJavaScriptで実装

class="showmore_wrap"を設定した要素にもっと見るボタンを追加します。
show_moreのJSとCSSを読み込んだら、次のように設定します。

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

<div class="showmore_wrap">
  ...コンテンツ
</div>
window.addEventListener('load', () => {
  const showmore = new 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でもっと見るを実装
    });
});

▼デフォルト（ボタンを下に表示）

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

code

const showmore1 = new ShowMore();

▼ボタンを下に表示（ヘッダーの高さ90px調整）

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

code

const showmore = new ShowMore({
  offsetYPc : 90,
  offsetYSp : 90,
});

▼ボタンを上に表示

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

code

const showmore = new ShowMore({
  closeBtnPosition : "top",
});

▼ボタンをカスタマイズ

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト