我有三个服务，与阅读更多按钮，我想他们都显示一些文本，当用户点击阅读更多按钮，它显示更多，但挣扎着让文本toogle.我正在使用一个CMS称为processwire.我有一些jquery，但不知道我会错吗？

$("#designLink").addClass("active");

$("#designLink").click(function (e) {
    e.preventDefault();
    $("#DesignService").show();
    $("#PrintService").hide();
    $("#PublishingService").hide();
    $("#DesignService").removeClass("visuallyhidden");
    $("#designLink").addClass("active");
    $("#printLink").removeClass("active");
    $("#publishingLink").removeClass("active");
});

$("#printLink").click(function (e) {
    e.preventDefault();
    $("#DesignService").hide();
    $("#PrintService").show();
    $("#PublishingService").hide();
    $("#PrintService").removeClass("visuallyhidden");
    $("#designLink").removeClass("active");
    $("#printLink").addClass("active");
    $("#publishingLink").removeClass("active");
});

$("#publishingLink").click(function (e) {
    e.preventDefault();
    $("#DesignService").hide();
    $("#PrintService").hide();
    $("#PublishingService").show();
    $("#PublishingService").removeClass("visuallyhidden");
    $("#designLink").removeClass("active");
    $("#printLink").removeClass("active");
    $("#publishingLink").addClass("active");
});

<div class="container--content">

      <div class="home-services cf">
        <h2 class="text-center">Our Services</h2>
        <div class="home-services__services-container">
          <div class="home-services__services grid flex">
            <div class="service-box lap-and-up-one-third grid__item">
<!-- design section -->
              <p class="service-box__link">Design</p>
              <img class="service-box__icon" src="<?php echo $config->urls->templates ?>public/images/icon-design.svg" onerror="this.onerror=null; this.src='icon-design.png'" alt="" title=" Design Work">
 <!--
   design text
          -->
              <?php echo "{$page->designServiceText}"; ?>

              <div class="toggle-box">
                <input type="checkbox" style="display: none" id="toggle-box__toggle">
                <label class="button" for="toggle-box__toggle">Toggle read more</label>
                <div><?php echo "{$page->designServiceTextMore}"; ?></div>
              </div>
            </div>
            <!--
printing section
            -->
            <div class="service-box lap-and-up-one-third grid__item">
              <p class="service-box__link">Print</p>
              <img class="service-box__icon" src="<?php echo $config->urls->templates ?>public/images/icon-print.svg" onerror="this.onerror=null; this.src='icon-print.png'" alt="" title="">
 <!--
print text
          -->
              <?php echo "{$page->printServiceText}"; ?>
              <div class="toggle-box">
                <input type="checkbox" style="display: none" id="toggle-box__toggle2">
                <label class="button" for="toggle-box__toggle2">Toggle read more</label>
                <div><?php echo "{$page->printServiceTextMore}"; ?></div>
              </div>
            </div>
            <!--
publishing section
          -->
            <div class="service-box lap-and-up-one-third grid__item">
              <p class="service-box__link">Publishing</p>
              <img class="service-box__icon" src="<?php echo $config->urls->templates ?>public/images/icon-publishing.svg" onerror="this.onerror=null; this.src='icon-publishing.png'" alt="" title=" Publishing Work">
 <!--
publishing text
          -->
              <?php echo "{$page->publishingServiceText}"; ?>
              <div class="toggle-box">
                <input type="checkbox" style="display: none" id="toggle-box__toggle3">
                <label class="button" for="toggle-box__toggle3">Toggle read more</label>
                <div><?php echo "{$page->publishingServiceTextMore}"; ?></div>
              </div>
            </div>
            <hr class="home-services__divider" />
          </div>
        </div>
      </div>

    </div>