阅读更多切换按钮

Question

I have three services, with a read more button, I want to them all show some text and when the user clicks the read more button it to show more but struggling to get the text to toogle. I am using a CMS called processwire. I have some jquery but was wondering were I am going wrong?

 $("#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>

Answer 1

You are referring to classes that do not exist in the code. publishingLink is only mentioned in the Javascript, not in the HTML or CSS.