Read More Button - Expand section on click

_Read More Button - Expand section on click.md

A Read More button (in Beaver Builder but could be adapted for anywhere)

- I have included html, css, and js examples -

I have added a bunch of comments to help you adapt to your situation and explain it along the way

read-more-1.html

<!-- HTML for the hide button -->

<!-- your section you want to have a read more button -->
<div id="overview">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>


<!-- your read more button -->
<div class="align-center">
    <button type="button" class="read-more-btn" id="overview-btn">
      <span>Read More</span>
    </button>
</div>

read-more-2.css

/* Read More Styles */

section.read-more{
	overflow-y: auto;
	height: auto;
	transition: height .2s ease-in-out;
}

section.read-more.closed{
	overflow-y: hidden;
	height: 425px !important; /* set your height you want the container to be when collapsed */
	position:relative;
}

/* White gradient hiding bottom of read more section */
section.read-more::after{
	content:'';
	width:100%;
	height:80px;
  	background: linear-gradient(to top, white,rgba(255, 255, 255, 0));
	bottom:0;
	left:0;
	position:absolute;
	opacity:1;
}
section.read-more:not(.closed)::after{
	opacity:0;
}

.read-more-btn{
	background:none;
	border:none;
	color:darkred;
	text-transform:uppercase;
	font-weight:500;
	font-size:18px;
	position:relative;
}
.read-more-btn:hover,
.read-more-btn:focus-visible{
	background:none;
	border:none;
	color:maroon;
	text-transform:uppercase;
	font-weight:500;
	font-size:18px;
	position:relative;
}
.read-more-btn span::after{
	content:'';
	position:absolute;
	top:4px;
	right:-15px;
	border-right:2px solid darkred;
	border-bottom:2px solid darkred;
	width:17px;
	height:17px;
	transform:scalex(.8) rotate(45deg);
	transform-origin:12px 12px;
	transition:transform .2s ease-in-out;
}
.read-more-btn:not(.closed) span::after{
	transform:scalex(.8) rotate(225deg);
}

read-more-3.js

jQuery(document).ready(function ($) {
    
    // Dont run if inside the beaver builder editor
    if ( 'undefined' != typeof window.FLBuilderConfig ) {
        return;
    }
    
    // Set columns up for Read More button
    
    var overviewHeight = $('#overview').height();   // get the height
    
    if (overviewHeight > 600) {  // if your container is less than this value it will remove the Read More button and remove the fade at the bottom - this is useful when using it in a Beaver Themer template. You can remove this if statement if you are applying it on a case by case basis
        $("#overview").height(overviewHeight);
        $("#overview").addClass("closed");
    } else{
        $("#overview").parent().next('.read-more-container').hide();
        $("#overview").addClass('short-contents');
    }
    
    // Set Buttons to closed
    $(".read-more-btn").addClass("closed");
    
    // Buttons toggle sections open / closed
    $(".read-more-btn").on("click", function () {
    
        // Change this selector to correctly select the text you want to open / close in relation to the 'read more' button
        var sectionBeforeBtn = $(this).parent().parent().parent().parent().prev().children(); 
        
        sectionBeforeBtn.toggleClass("closed");
        $(this).toggleClass("closed");
        $(this).find('span').toggleText('Read More', 'Read Less');
        
        // disabled the 'read less' button on mobile as it doesn't scroll you back to the top of where you collapsed which makes it disorenting as you'd be way further down the page than where you started
        if($(window).width() < 768){ 
            $(this).hide();
        }
        
    });
    
    // Toggle Text fucntion
    $.fn.extend({
        toggleText: function(a, b){
            return this.text(this.text() == b ? a : b);
        }
    });
  
});