How to add automatically collapse/expand in content wordpress (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> 

.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
}

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

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

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

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

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