How to add automatically collapse/expand in content wordpress (single.php)?

3 comments

1. This might be old but I solve it like this as none of the answers works for me:

   HTML and PHP:

   <span class="p-read-more"></span>
   <?php the_content(); ?>
   <a href="" class="read-more-link">Read More</a>
   

   CSS:

   .p-read-more+p {
       position: relative;
       overflow: hidden;
       max-height: 110px;
       height: auto;
       transition: max-height 1s linear;
   }
   
   .expand {
       max-height: 100% !important;
   }
   
   .read-more-link {
       display: block;
       max-width: 85px;
   }
   

   Note:
   The 110px max height and 85px width might need to be changed according to your text font size.

   jQuery:

   $(document).ready(function() {
       $(".read-more-link").click(function(e) {
           e.preventDefault();
           if ($(this).text() == "Read More") {
               $(this).parent().find(".p-read-more+p").addClass("expand");
               $(this).text("Read Less");
           } else {
               $(this).parent().find(".p-read-more+p").removeClass("expand");
               $(this).text("Read More");
           }
       });
   });
   

   This is another Variation for jQuery that I like

   $(document).ready(function() {
       $(".read-more-link").click(function(e) {
           e.preventDefault();
           const myThis = $(this);
           if ($(this).text() == "Read More") {
               $(this).parent().find(".p-read-more+p").addClass("expand");
               const myTimeout = setTimeout(myReadLess, 500);
               function myReadLess() {
                   myThis.text("Read Less");
               }
           } else {
               $(this).parent().find(".p-read-more+p").removeClass("expand");
               const myTimeout = setTimeout(myReadMore, 1100);
               function myReadMore() {
                   myThis.text("Read More");
               }
           }
       });
   });
   

   Log in to Reply

2. Option 1:

   Include the post excerpt and post content, hiding the content with css.

   <div class="excerpt"><?php the_excerpt();?><a href="#">Read more</a></div>
   <div class="content"><?php the_content(); ?><a class="less-button" href="#">Read more</a></div> 
   

   In your css file:

   .content{ 
       max-height: 0; 
       overflow: hidden; 
       transition: max-height .4s ease;
   }
   .content.-show { 
      max-height: 300px; // the closer this height is to reality, the smoother the transition
   }
   

   Javascript/jQuery

   $('.excerpt a[href="#"]').on('click', function() {
        e.preventDefault();
        $('.content').addClass('-show);
   }
   $('.content a.less-button').on('click', function() {
        e.preventDefault();
        $('.content').removeClass('-show);
   }
   

   Log in to Reply

3. I tried using the following code:

   1. I put put the code below in single.php (in mytheme develop by flexithemes.com: post-single.php)

   <div class="excerpt"><?php the_excerpt();?><a href="#">Read more</a></div>
   <div class="content"><?php the_content(); ?><a class="less-button" href="#">Read more</a></div> 

   2. I put the code below in style.php

   .content{ 
           max-height: 0; 
           overflow: hidden; 
           transition: max-height .4s ease;
       }
       .content.-show { 
          max-height: 300px; // the closer this height is to reality, the smoother the transition
       }

   3. I paste the code below before in file header.php

    <script type="text/javascript">
       $('.excerpt a[href="#"]').on('click', function() {
            e.preventDefault();
            $('.content').addClass('-show);
       }
       $('.content a.less-button').on('click', function() {
            e.preventDefault();
            $('.content').removeClass('-show);
       }
       </script>

   Result:
   Text successfully cut off, but the link Readmore to expand text not working.
   What do I need to improve, so to expand text link Readmore can work well.

   Log in to Reply