show-more-ver02

HTML

              
                    <div id="wrapper">
      <header>
        <div class="logo">ロゴ</div>
        <nav>
          <ul>
            <li>なび1</li>
            <li>なび2</li>
            <li>なび3</li>
          </ul>
        </nav>
      </header>
      <main>
        <h1>もっと見るボタンをJavaScriptで実装</h1>
        <p>
          <span class="marker">class="showmore_wrap"</span
          >を設定した要素にもっと見るボタンを追加します。<br />show_moreのJSとCSSを読み込んだら、次のように設定します。
        </p>
        <pre
          style="max-width: 86vw"
          data-title="html"
        ><code class="language-markup">&lt;div class="showmore_wrap">
  ...コンテンツ
&lt;/div></code></pre>

        <pre
          style="max-width: 86vw"
          data-title="JavaScript"
        ><code class="language-javascript">window.addEventListener('load', () => {
  const showmore = new ShowMore();
});</code></pre>
        <p>初期値は次の通りです。</p>
        <pre
          style="max-width: 86vw"
          data-title="JavaScript"
        ><code class="language-javascript">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></pre>

        <h2>▼デフォルト（ボタンを下に表示）</h2>
        <div class="showmore_wrap list_wrap">
          <ul class="flex-list">
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
          </ul>
          <p style="margin-bottom: 0">code</p>
          <pre
            style="max-width: 86vw"
          ><code class="language-javascript">const showmore1 = new ShowMore();</code></pre>
        </div>
        <!-- showmore_wrap -->

        <h2>▼ボタンを下に表示（ヘッダーの高さ90px調整）</h2>
        <div class="list_wrap" id="showMore1">
          <ul class="flex-list">
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
          </ul>
          <p style="margin-bottom: 0">code</p>
          <pre
            style="max-width: 86vw"
          ><code class="language-javascript">const showmore = new ShowMore({
  offsetYPc : 90,
  offsetYSp : 90,
});</code></pre>
        </div>
        <!-- showmore_wrap -->

        <h2>▼ボタンを上に表示</h2>
        <div class="list_wrap" id="showMore2">
          <ul class="flex-list">
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
          </ul>
          <p style="margin-bottom: 0">code</p>
          <pre
            style="max-width: 86vw"
          ><code class="language-javascript">const showmore = new ShowMore({
  closeBtnPosition : "top",
});</code></pre>
        </div>
        <!-- showmore_wrap -->
       <h2>▼ボタンをカスタマイズ</h2>
        <div class="list_wrap showmore_wrap" id="showMore3">
          <ul class="flex-list">
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
            <li>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </li>
          </ul>
          
        </div>
        <!-- showmore_wrap -->
        <br />

        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
      </main>

      <footer
        id="footer"
        style="text-align: center; margin-top: 60px; padding: 20px"
      >
        <div class="copyright">
          Copyright <span id="thisyear">2023</span> &copy; test.com
        </div>
      </footer>
    </div>

CSS

              
                /* ------------------------ */
/* common
/* ------------------------ */
body {
  margin: 110px 10px 0;
  background: #fff;
  padding: 0;
}

body * {
  box-sizing: border-box;
}

main {
  margin: 0 10px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

h2 {
  font-size: 1.2rem;
  color: #383838;
  margin-top: 5rem;
}

h2:not(:first-of-type) {
  margin-top: 10rem;
}

ul {
  padding: 0;
}

li {
  list-style: none;
}

pre {
  max-width: 95vw !important;
}

header {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  background: #ccc;
  width: 100%;
  margin: 0 -10px;
  padding: 0 15px;
  height: 90px;
  z-index: 10;
}

nav {
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  nav {
    height: 50px;
  }
}

nav ul {
  display: flex;
}

nav ul li {
  margin: 0 10px;
}

.mt60 {
  margin-top: 60px;
}

.list_wrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list_wrap li {
  flex: 0 1 calc(50% - 40px);
  margin: 10px;
  padding: 10px;
  background: #fffdea;
}

#showMore1.list_wrap li {
  background: #eafff5;
}

#showMore2.list_wrap li {
  background: #f2eaff;
}

#showMore3.list_wrap li {
  background: #ffeaf3;
}

pre[data-title] {
  position: relative;
}

pre::after {
  content: attr(data-title);
  padding: 0 1em;
  background: #2196f3;
  color: #fff;
  font-size: 0.8em;
  position: absolute;
  top: 0;
  right: 0;
  min-width: 3em;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .list_wrap ul {
    display: block;
  }
}

.marker {
  background: #eafff5
}

.mt30 {
  margin-top: 30px;
}

.mt80 {
  margin-top: 80px;
}

/* ボタンカスタマイズここから */
#showMore3 .shm_btn button {
  width: 30%;
  color: #fff;
  border: none;
  border-radius: 0;
  display: block;
  font-weight: normal;
  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) {
  #showMore3 .shm_btn button {
    width: 100%;
    box-sizing: border-box;
  }
}

#showMore3 .shm_btn.shm_position--bottom button:hover,
#showMore3 .shm_btn.shm_position--top button:hover {
  opacity: 0.8;
}

#showMore3 .shm_btn button.shm_btnTxt--open {
  background: #3b3b3b;
}

#showMore3 .shm_btn button.shm_btnTxt--close {
  background: #2e2e2e;
}

#showMore3 .shm_btn button.shm_btnTxt--open:before {
  content: 'show more';
  display: inline;
}

#showMore3 .shm_btn button.shm_btnTxt--close:before {
  content: 'close';
  display: inline;
}
/* ボタンカスタマイズここまで */

/* ------------------------ */
    /* shm_wrap
/* ------------------------ */
  /* common */
  .shm_active {
    position: relative;
  }
  .shm_inner {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in;
  }
  @media screen and (max-width: 767px) {
    .shm_inner {
      transition: initial;
    }
  }
  /* ボタンを上に表示 */
  .shm_btn.shm_position--top {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 30%;
  }
  
  .shm_positionTop-cover {
    background-color: #fff;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      white 70%
    );
    background-color: transparent;
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 0;
  }
  .shm--open .shm_positionTop-cover {
    display:none;
  }
  
  /* ボタンを下に表示 */
  .shm_btn.shm_position--bottom {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: #fff;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      white 70%
    );
    background-color: transparent;
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 0;
  }
  .shm--open .shm_btn.shm_position--bottom {
    justify-content: center;
    align-items: flex-start;
    background: none;
    position: static;
    margin-top: 1em;
  }
  /* ボタンの表示 */
  .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 a: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;
  }

JS

              
                // もっと見るコンテンツ実装ここから
class ShowMore {
  constructor(options = {}) {
    // 初期値
    const {
      selector = ".showmore_wrap",
      prefix = "shm",
      displayShowHeightPc = 0.3,
      displayShowHeightSp = 0.2,
      closeBtnPosition = "bottom",
      offsetYPc = 0,
      offsetYSp = 0,
      showPc = true,
      showSp = true,
    } = options;
    (this.targetShowWrap = selector),
      (this.displayShowHeightPc = displayShowHeightPc),
      (this.displayShowHeightSp = displayShowHeightSp),
      (this.closeBtnPosition = closeBtnPosition),
      (this.headerHeightPc = offsetYPc),
      (this.headerHeightSp = offsetYSp),
      (this.showPc = showPc),
      (this.showSp = showSp),
      // アプリ内で使用するクラス名を管理
      (this.prefix = prefix),
      (this.classes = {}),
      (this.classes.active = `${this.prefix}_active`),
      (this.classes.activeOpen = `${this.prefix}--open`),
      (this.classes.activeClose = `${this.prefix}--close`),
      (this.classes.inner = `${this.prefix}_inner`),
      (this.classes.positionTop = `${this.prefix}_position--top`),
      (this.classes.topCover = `${this.prefix}_positionTop-cover`),
      (this.classes.positionBottom = `${this.prefix}_position--bottom`),
      (this.classes.btn = `${this.prefix}_btn`),
      (this.classes.btnTop = `${this.prefix}_btn--top`),
      (this.classes.btnBottom = `${this.prefix}_btn--bottom`),
      (this.classes.openLink = `${this.prefix}_btnTxt--open`),
      (this.classes.closeLink = `${this.prefix}_btnTxt--close`),
      // 実行
      this._init();
  }

  _init() {
    const showWraps = document.querySelectorAll(this.targetShowWrap);
    Array.from(showWraps).forEach((showWrap, index) => {
      // 対象要素にクラスを追加
      if (!showWrap.classList.contains(this.classes.active)) {
        showWrap.classList.add(this.classes.active, this.prefix + "_" + index);

        // デバイス判定
        const isDeviceSP = navigator.userAgent.match(/iPhone|Android.+Mobile/);
        // デバイスごとに非表示を設定
        if (this.showSp && isDeviceSP) {
          this._showMoreExe(showWrap);
          return;
        } else if (this.showPc && !isDeviceSP) {
          this._showMoreExe(showWrap);
          return;
        } else if (this.showSp && this.showPc) {
          this._showMoreExe(showWrap);
        } else if (!this.showSp && !this.showPc) {
          return;
        }
      }
    });
  }
  // もっとみる要素作成
  _showMoreExe(targetElm) {
    this._createShowElm(targetElm);
    this._createShowBottomBtn(targetElm);
    this._showmoreAddFc(targetElm);
  }

  // 要素のトップ位置を取得
  _getOffsetTop(targetElm) {
    const rect = targetElm.getBoundingClientRect();
    const scrollTop = window.scrollY || document.scrollingElement.scrollTop;
    return rect.top + scrollTop;
  }

  // 表示コンテンツの高さ
  _getDisplayShowHeight() {
    const isDeviceSP = navigator.userAgent.match(/iPhone|Android.+Mobile/);
    if (isDeviceSP) {
      return this.displayShowHeightSp;
    } else {
      return this.displayShowHeightPc;
    }
  }

  // スクロール位置を管理
  _scrollObserver(targetInner, headerHeight, displayState) {
    const observer = new ResizeObserver((entries) => {
      const showmoreToggle = entries[0].target.parentNode.querySelector(
        `.${this.classes.btn}`
      );
      const btnTopPosition = this._getOffsetTop(showmoreToggle);
      if (this.closeBtnPosition === "bottom") {
        window.scroll({
          top: btnTopPosition - Number(headerHeight),
          // behavior: 'smooth',
        });

        // 0.3秒後に監視を解除
        setTimeout(() => {
          observer.disconnect();
        }, 300);
      }
    });

    if (displayState === "displayClose") {
      observer.observe(targetInner);
    } else {
      observer.disconnect();
    }
  }

  // ヘッダーの高さ調整
  _getHeaderHeight() {
    const isDeviceSP = navigator.userAgent.match(/iPhone|Android.+Mobile/);
    if (isDeviceSP) {
      return this.headerHeightSp;
    } else {
      return this.headerHeightPc;
    }
  }
  // クラス切り替え（openした時）
  _switchClassOpen(elm, openClass, closeClass) {
    elm.classList.add(openClass);
    elm.classList.remove(closeClass);
  }

  // クラス切り替え（closeした時）
  _switchClassClose(elm, openClass, closeClass) {
    elm.classList.remove(openClass);
    elm.classList.add(closeClass);
  }

  // ターゲットの表示を開く
  _targetOpen(targetInner, targetShowHeight) {
    const parent = targetInner.parentNode;
    this._switchClassOpen(
      parent,
      this.classes.activeOpen,
      this.classes.activeClose
    );
    targetInner.style.height = targetShowHeight + "px";

    this._scrollObserver(targetInner, "", "displayOpen");
  }

  // ターゲットの表示を閉じる
  _targetClose(targetInner, targetCloseHeight, headerHeight) {
    targetInner.parentNode.classList.remove(this.classes.activeOpen);
    targetInner.parentNode.classList.add(this.classes.activeClose);
    targetInner.style.height = targetCloseHeight + "px";

    this._scrollObserver(targetInner, headerHeight, "displayClose");
  }

  // もっと見るボタンの表示を変更(open)
  _showmoreBtnChangeOpen(showBth) {
    showBth.classList.remove(this.classes.openLink);
    showBth.classList.add(this.classes.closeLink);
  }

  // もっと見るボタンの表示を変更(close)
  _showmoreBtnChangeClose(showBth) {
    showBth.classList.remove(this.classes.closeLink);
    showBth.classList.add(this.classes.openLink);
  }

  // もっと見るクリック
  _showmoreClick(
    targetContent,
    targetShowHeight,
    targetCloseHeight,
    headerHeight,
    self
  ) {
    const showBtn = this;
    const isOpen = showBtn.classList.contains(self.classes.openLink);
    const isClose = showBtn.classList.contains(self.classes.closeLink);

    if (isOpen) {
      self._targetOpen(targetContent, targetShowHeight);
      self._showmoreBtnChangeOpen(showBtn);
    } else if (isClose) {
      self._targetClose(targetContent, targetCloseHeight, headerHeight);
      self._showmoreBtnChangeClose(showBtn);
    }
  }

  // もっとみる要素作成
  _createShowElm(targetWrap) {
    // showmore_innerを追加
    if (targetWrap.querySelector(this.classes.inner) == null) {
      targetWrap.innerHTML =
        `<div class="${this.classes.inner}">` + targetWrap.innerHTML + "</div>";
    }
  }

  // もっと見るボタンを追加
  _createShowBottomBtn(targetWrap) {
    if (targetWrap.querySelector(`.${this.classes.btn}`) !== null) return;

    const showmoreInner = targetWrap.querySelector(`.${this.classes.inner}`);
    const createShowToggle = document.createElement("div");
    const createShowToggleButton = document.createElement("button");
    createShowToggleButton.type = "button";

    const btnClassName = this.closeBtnPosition === "top"
      ? this.classes.positionTop
      : this.classes.positionBottom;

    createShowToggle.classList.add(this.classes.btn, btnClassName);
    createShowToggleButton.classList.add(this.classes.openLink);
    createShowToggle.appendChild(createShowToggleButton);

    // ボタンを要素のトップに配置
    if (btnClassName == this.classes.positionTop) {
      showmoreInner.before(createShowToggle);

      if (targetWrap.querySelector(`.${this.classes.btnBottom}`) == null) {
        const createBottomCover = document.createElement("div");
        createBottomCover.classList.add(this.classes.topCover);
        targetWrap.appendChild(createBottomCover);
      }

      // ボタンを要素の下に配置
    } else if (btnClassName == this.classes.positionBottom) {
      targetWrap.appendChild(createShowToggle);
    }
  }

  // もっとみる要素に機能追加
  _showmoreAddFc(targetWrap) {
    const displayShowHeight = this._getDisplayShowHeight();
    const headerHeight = this._getHeaderHeight();
    const showmoreContent = targetWrap.querySelector(`.${this.classes.inner}`);
    const showmoreToggleButton = targetWrap.querySelector(
      `.${this.classes.btn} button`
    );
    let showHeight = parseInt(showmoreContent.offsetHeight);
    let closeHeight = parseInt(showHeight * displayShowHeight);

    const self = this;

    //初期値
    showmoreContent.style.height = closeHeight + "px";

    showmoreToggleButton.addEventListener(
      "click",
      this._showmoreClick.bind(
        showmoreToggleButton,
        showmoreContent,
        showHeight,
        closeHeight,
        headerHeight,
        self
      )
    );
  }
}


window.addEventListener("load", () => {
  // デフォルト（ボタンを下に表示）
  const showmore = new ShowMore();
  // ボタンを下に表示（ヘッダーの高さ調整）
  const showmore1 = new ShowMore({
    selector: "#showMore1",
    offsetYPc: 90,
    offsetYSp: 90,
  });
  // ボタンを上に表示
  const showmore2 = new ShowMore({
    selector: "#showMore2",
    closeBtnPosition: "top",
  });
  // ボタンをカスタマイズ
  const showmore3 = new ShowMore({
    selector: "#showMore3",
    offsetYPc: 90,
    offsetYSp: 90,
  });
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions