Testimonial Section equal height set JS source code

							Copy to clipboard
							
					document.addEventListener("DOMContentLoaded", function() {
    var testimonialContents = document.querySelectorAll(".testimonial-content.read-more");

    // Calculate the maximum height among all testimonial contents
    var maxHeight = 0;
    testimonialContents.forEach(function(testimonialContent) {
        var height = testimonialContent.clientHeight;
        if (height > maxHeight) {
            maxHeight = height;
        }
    });

    // Set the maximum height to all testimonial contents
    testimonialContents.forEach(function(testimonialContent) {
        testimonialContent.style.height = "100px"; // Set initial height to 100px
    });

    testimonialContents.forEach(function(testimonialContent) {
        var content = testimonialContent.textContent.trim();
        var words = content.split(" ");
        var shortText = words.slice(0, 14).join(" ");
        var remainingText = words.slice(14).join(" ");

        testimonialContent.innerHTML = shortText + '<span class="more-text" style="display:none;">' + remainingText + '</span> <button class="read-more-btn">Read More</button>';

        var readMoreBtn = testimonialContent.querySelector(".read-more-btn");
        var moreText = testimonialContent.querySelector(".more-text");

        readMoreBtn.addEventListener("click", function() {
            if (moreText.style.display === "none") {
                moreText.style.display = "inline";
                readMoreBtn.textContent = "Read Less";
                testimonialContent.style.height = "auto";
            } else {
                moreText.style.display = "none";
                readMoreBtn.textContent = "Read More";
                testimonialContent.style.height = "100px"; // Set height back to 100px when Read More is clicked
            }
        });
    });
});