Home » Jquery » How do I do a toggle function jQuery in PHP/WordPress without refreshing the whole page?

How do I do a toggle function jQuery in PHP/WordPress without refreshing the whole page?

Posted by: admin February 22, 2020 Leave a comment

Questions:

What I wanted is just the hyperlink text (will be replaced by button) to be Toggled using JQuery but it would refresh the whole page when I tried implementing it on PHP/WordPress.

Thanks for your input!

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>
How to&Answer:

As mentioned in the comments you are not using Event.preventDefault(); this will stop default event behavior.

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>