WordPressに「続きを読む」ボタン（アコーディオン）を実装する方法【スマホ・PC対応】

<div class="p-profile__textarea js-accordion">
	<div class="p-profile__button-toggle js-accordion-btn">
		<span class="u-upper">
			<span class="open-text">view more</span>
			<span class="close-text">close</span>
		</span>
	</div>
	<?php
	// PHPで動的にテキストを出す（ACF）
	$manager_profile_text = get_field('manager_profile_text', $manager_term);//タームページで出力の場合
	if ($manager_profile_text) {
		echo '<p class="p-profile__text p-profile__hide-box js-accordion-contents">' . wp_kses_post($manager_profile_text) . '</p>';
	} ?>
</div>

// viewMoreAccordion（ウィンドウサイズが768px以上のときにリサイズする）====================
// 閉じている時は少しチラ見せ、開いている時は全文表示（要素ごとに、高さ改変可能）

  window.addEventListener("load", initializeAccordion);
  window.addEventListener("resize", resizeAccordion);

  function initializeAccordion() {
    setAccordionHeights();
    setupAccordionButtons();
  }

  function setAccordionHeights() {
    document.querySelectorAll(".js-accordion").forEach(function (accordion) {
      const content = accordion.querySelector(".js-accordion-contents");
      adjustHeight(content, accordion.classList.contains("is-active")); //js-accordion-contentsに、is-activeがあるかどうかで処理を変更する
    });
  }

  //アコーディオンボタンのクリックイベント
  function setupAccordionButtons() {
    document.querySelectorAll(".js-accordion-btn").forEach(function (btn) {
      btn.addEventListener("click", function () {
        const parentAccordion = this.closest(".js-accordion");
        if (parentAccordion) {
          parentAccordion.classList.toggle("is-active"); //親の要素にis-activeを付与・削除

          const nextContent = this.nextElementSibling;

          // ボタンに隣接する.js-accordion-contentsの表示切り替え
          if (
            nextContent &&
            nextContent.classList.contains("js-accordion-contents")
          ) {
            adjustHeight(
              nextContent,
              parentAccordion.classList.contains("is-active") //親の要素にis-activeがあるかどうか
            );
          }
        }
      });
    });
  }

  // js-accordion-contentsの高さ切り替えの処理内容
  function adjustHeight(element, isActive) {
    //.is-activeがある場合、全文表示。ない場合、少しチラ見せ
    if (isActive) {
      element.style.height = element.scrollHeight + "px";
    } else {
      //チラ見せの高さを設定
      if (window.innerWidth >= 768) {
        //PCの場合
        element.style.height = "12em"; //6行くらい（任意で調整）
      } else {
        //SPの場合
        element.style.height = "32vw"; //6行くらい（任意で調整）
      }
    }
  }

  function resizeAccordion() {
    if (window.innerWidth >= 768) {
      setAccordionHeights();
    }
  }

.p-manager-profile {
  &__textarea {
    // 「続きを見る」ボタンの親要素につける
    position: relative;
    // 「続きを見る」ボタンの高さ分、余白を確保
    padding-bottom: 42px; //アコーディオンのトグル部分
    // （装飾部分）
    text-align: justify;
    text-align-last: left;
  }

  //アコーディオンのトグル部分-----------
  &__button-toggle {
    cursor: pointer;
    caret-color: transparent;

    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: 42px;
    z-index: 3; //他の要素より上に表示するため


    & > span {
      font-size: 15px;

      &::after {
        content: "";
        display: inline-block;
        margin-left: 1.5em;
        width: 9px;
        height: 9px;
        border-right: 1px solid var(--color-main);
        border-bottom: 1px solid var(--color-main);
        transform: translateY(-25%) rotate(45deg);
        transform-origin: center;
        transition: 0.3s;
      }

      .open-text {
        display: inline-block;
      }

      .close-text {
        display: none;
      }
    }
  }

  //アコーディオン部分（高さ改変）-----------
  &__hide-box {
    position: relative;
    height: 32vw; //高さ初期値（JavaScriptと揃えておく）
    overflow: hidden;
    transition: height 300ms ease;
    will-change: height; //動きを滑らかにする

    @include s.media(md) { 
      //タブレット・pcの時
      height: 12em; //高さ初期値（JavaScriptと揃えておく）
    }

    //はみ出た部分（省略記号っぽく見せる）
    &::after {
      content: "...";
      display: inline-block;
      position: absolute;
      right: 0;
      bottom: 0;
      background: #fff;
    }
  }

  //アコーディオン開いているとき------------
  .is-active {
    #{$this}__button-toggle {
      & > span {
        &:after {
          transform: translate(0%, 25%) rotate(225deg);
        }

        .open-text {
          display: none;
        }

        .close-text {
          display: inline-block;
        }
      }
    }

    #{$this}__hide-box {
      height: auto;

      &::after {
        display: none;
      }
    }
  }
}