Как сделать функцию переключения jQuery в PHP / WordPress без обновления всей страницы?

Question

То, что я хотел, - это просто текст гиперссылки (будет заменен кнопкой), который можно переключать с помощью JQuery, но он будет обновлять sh всю страницу, когда я попытался реализовать ее на PHP / WordPress.

Спасибо за ваш вклад!

jQuery(document).ready(function( $ ){
    $('.expands').on('click', function() {
      $('.collapse-content').toggleClass('expand-content');
      if  ($('.collapse-content').hasClass('expand-content') == true) {
        $('.expands').text('Smaller view');
      } else {
        $('.expands').text('Expand view');
      }
  
 });
});

.collapse-content {
  max-height: 25em;
  overflow-y: auto;
}

.expand-content {
  max-height: max-content !important;  
}

.collapse-view {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll-content transcript">
    <header class="d-flex justify-content-between">
      <h3>Title of the podcast</h3>
      <a href="#" class="expands">Expand view</a>
    </header>
    <div class="collapse-content">
      <article>
        <h4>Person name</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae quis officia quibusdam nobis cumque deleniti explicabo obcaecati libero aperiam, voluptate quasi pariatur repudiandae fuga laboriosam tempora assumenda labore similique! Voluptatibus ipsa harum saepe voluptatum illo voluptates recusandae, animi hic, dolorum debitis porro sequi est ducimus excepturi amet et facere magnam!</p>
        
      </article>
    </div>
 </div>

Answer 1

Как указано в комментариях, вы не используете Event.preventDefault () ; это остановит поведение события по умолчанию.

jQuery(document).ready(function( $ ){
     
    $('.expands').on('click', function(e) {
      e.preventDefault();
      $('.collapse-content').toggleClass('expand-content');
      if  ($('.collapse-content').hasClass('expand-content') == true) {
        $('.expands').text('Smaller view');
      } else {
        $('.expands').text('Expand view');
      }
      return false;
  
 });
});

.collapse-content {
  max-height: 25em;
  overflow-y: auto;
}

.expand-content {
  max-height: max-content !important;  
}

.collapse-view {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll-content transcript">
    <header class="d-flex justify-content-between">
      <h3>Title of the podcast</h3>
      <a href="#" class="expands">Expand view</a>
    </header>
    <div class="collapse-content">
      <article>
        <h4>Person name</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae quis officia quibusdam nobis cumque deleniti explicabo obcaecati libero aperiam, voluptate quasi pariatur repudiandae fuga laboriosam tempora assumenda labore similique! Voluptatibus ipsa harum saepe voluptatum illo voluptates recusandae, animi hic, dolorum debitis porro sequi est ducimus excepturi amet et facere magnam!</p>
        
      </article>
    </div>
 </div>