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

Question

There are a lot of WordPress plugins for adding collapse/expand in WordPress content, such as Collapse-O-Matic.

But is there a way to add automatically collapse/expand in content WordPress (single.php)? If the content is more than 50 words, automatically the rest will be hidden.

I found the tutorial here:

http://shakenandstirredweb.com/240/jquery-moreless-text

but I can not be a way to use it. Can anyone help?

Answer 1

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);
}

Answer 2

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.

Answer 3

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");
            }
        }
    });
});