Read More Read Less Button using jQuery and Javascript Multiple Example

According to container height Example

Using JavaScript:

Here is the full code example with html, CSS, and javascript.

Try It

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
                    <div class="container p-4">


    <div class="row">
        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <div class="content_area">
                        <h2>Lorem Ipsum dolor </h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac ullamcorper nisi.
                            Sed nec orci aliquet,
                            finibus velit sed, commodo libero. Donec sit amet dapibus justo. Mauris id arcu elit.
                            Nullam tristique nisl
                            ut vestibulum aliquam. In bibendum felis sed sapien ullamcorper, id iaculis lorem
                            tincidunt. Pellentesque
                            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
                            vel dictum nisl.
                        </p>
                    </div>
                    <button class="read-more btn btn-primary">Read More</button>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <div class="content_area">
                        <h2>Lorem Ipsum dolor </h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac ullamcorper nisi.
                            Sed nec orci aliquet,
                            finibus velit sed, commodo libero. Donec sit amet dapibus justo. Mauris id arcu elit.
                            Nullam tristique nisl
                            ut vestibulum aliquam. In bibendum felis sed sapien ullamcorper, id iaculis lorem
                            tincidunt. Pellentesque
                            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
                            vel dictum nisl.
                        </p>
                    </div>
                    <button class="read-more btn btn-primary">Read More</button>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <div class="content_area">
                        <h2>Lorem Ipsum dolor </h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac ullamcorper nisi.
                            Sed nec orci aliquet,
                            finibus velit sed, commodo libero. Donec sit amet dapibus justo. Mauris id arcu elit.
                            Nullam tristique nisl
                            ut vestibulum aliquam. In bibendum felis sed sapien ullamcorper, id iaculis lorem
                            tincidunt. Pellentesque
                            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
                            vel dictum nisl.
                        </p>
                    </div>
                    <button class="read-more btn btn-primary">Read More</button>
                </div>
            </div>
        </div>
    </div>

</div>

.content_area {
    max-height: 190px;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.show-content {
    max-height: none;
}

.read-more {
    display: none;
}

document.addEventListener('DOMContentLoaded', function () {
    var contents = document.querySelectorAll('.content_area');
    var buttons = document.querySelectorAll('.read-more');

    // Loop through each content and button pair
    for (var i = 0; i < contents.length; i++) {
        var content = contents[i];
        var button = buttons[i];

        // Check if content exceeds max height
        if (content.scrollHeight > content.offsetHeight) {
            button.style.display = 'block';
        }

        // Read More button click event
        button.addEventListener('click', createToggleContentHandler(content, button));
    }
});

function createToggleContentHandler(content, button) {
    return function () {
        content.classList.toggle('show-content');
        if (content.classList.contains('show-content')) {
            button.textContent = 'Read Less';
        } else {
            button.textContent = 'Read More';
        }
    };
}

Using jQuery:

Here is the full code example with html, CSS, and jQuery and their CDN.

Try It

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
                    <div class="container p-4">


    <div class="row">
        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <div class="content_area">
                        <h2>Lorem Ipsum dolor </h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac ullamcorper nisi.
                            Sed nec orci aliquet,
                            finibus velit sed, commodo libero. Donec sit amet dapibus justo. Mauris id arcu elit.
                            Nullam tristique nisl
                            ut vestibulum aliquam. In bibendum felis sed sapien ullamcorper, id iaculis lorem
                            tincidunt. Pellentesque
                            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
                            vel dictum nisl.
                        </p>
                    </div>
                    <button class="read-more btn btn-primary">Read More</button>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <div class="content_area">
                        <h2>Lorem Ipsum dolor </h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac ullamcorper nisi.
                            Sed nec orci aliquet,
                            finibus velit sed, commodo libero. Donec sit amet dapibus justo. Mauris id arcu elit.
                            Nullam tristique nisl
                            ut vestibulum aliquam. In bibendum felis sed sapien ullamcorper, id iaculis lorem
                            tincidunt. Pellentesque
                            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
                            vel dictum nisl.
                        </p>
                    </div>
                    <button class="read-more btn btn-primary">Read More</button>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <div class="content_area">
                        <h2>Lorem Ipsum dolor </h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac ullamcorper nisi.
                            Sed nec orci aliquet,
                            finibus velit sed, commodo libero. Donec sit amet dapibus justo. Mauris id arcu elit.
                            Nullam tristique nisl
                            ut vestibulum aliquam. In bibendum felis sed sapien ullamcorper, id iaculis lorem
                            tincidunt. Pellentesque
                            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
                            vel dictum nisl.
                        </p>
                    </div>
                    <button class="read-more btn btn-primary">Read More</button>
                </div>
            </div>
        </div>
    </div>

</div>

.content_area {
    max-height: 190px;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.show-content {
    max-height: none;
}

.read-more {
    display: none;
}

$(document).ready(function () {
    var content = $('.content_area');
    var button = $('.read-more');

    // Check if content exceeds max height for each pair
    for (var i = 0; i < content.length; i++) {
        if (content[i].scrollHeight > content[i].offsetHeight) {
            button.eq(i).show();
        }
    }

    // Read More button click event for each button
    button.on('click', function () {
        var currentIndex = button.index($(this));
        var currentContent = content.eq(currentIndex);

        currentContent.toggleClass('show-content');
        if (currentContent.hasClass('show-content')) {
            $(this).text('Read Less');
        } else {
            $(this).text('Read More');
        }
    });
});

According to Character Count add the Read More button using jQuery

Try It

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
        integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
                        <div class="container p-4">


    <div class="row">
        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <h2>Lorem Ipsum dolor </h2>
                    <div class="content">
                        <p class="show_read_more_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Phasellus
                            ac ullamcorper nisi.
                            Sed nec orci aliquet,
                            finibus velit sed, commodo libero. Donec sit amet dapibus justo. Mauris id arcu elit.
                            Nullam tristique nisl
                            ut vestibulum aliquam. In bibendum felis sed sapien ullamcorper, id iaculis lorem
                            tincidunt. Pellentesque
                            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
                            vel dictum nisl.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <div class="content">
                        <h2>Lorem Ipsum dolor </h2>
                        <p class="show_read_more_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Phasellus
                            ac ullamcorper nisi.
                            Sed nec orci aliquet,
                            finibus velit sed, commodo libero. Donec sit amet dapibus justo. Mauris id arcu elit.
                            Nullam tristique nisl
                            ut vestibulum aliquam. In bibendum felis sed sapien ullamcorper, id iaculis lorem
                            tincidunt. Pellentesque
                            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
                            vel dictum nisl.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <div class="content">
                        <h2>Lorem Ipsum dolor </h2>
                        <p class="show_read_more_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Phasellus
                            ac ullamcorper nisi.
                            Sed nec orci aliquet,
                            finibus velit sed, commodo libero. Donec sit amet.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

.show_read_more_content .more-text {
           display: none;
}

$(document).ready(function () {
    var maxLength = 300;
    $(".show_read_more_content").each(function () {
        var myStr = $(this).text();
        if ($.trim(myStr).length > maxLength) {
            var newStr = myStr.substring(0, maxLength);
            var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
            $(this).empty().html(newStr);
            $(this).append('... <a href="javascript:void(0);" class="read-more">read more</a>');
        }

        $(".read-more").click(function () {
            $(this).closest(".show_read_more_content").empty().html(myStr);
            $(this).remove();
        });
    });
});

Read More Read Less Button using jQuery and Javascript Multiple Example

According to container height Example

Related Post

Form Validation with captcha using jquery Validation and PHP

How to disable shortcut key in the website using jQuery

jQuery form events detail guide with example

According to Character Count add the Read More button using jQuery

Leave a comment

Feature Posts

How to export database data into excel in csv format using PHP

Login and Registration System in PHP and MySQL with oops concept

how to make bootstrap modal draggable and resizable

Uploading Multiple Files with Progress Bar via Ajax and PHP

How to export HTML table Data to CSV using only JavaScript?

Real-time wall clock using Javascript and CSS

Creating Dynamic PHP Event Management Calander using AJAX and Bootstrap

Upload Multiple Files with Progress Bar using Ajax and PHP

Enable Disable Customise and set Date Selection Using JQuery UI Datepicker

Swiper Slider Navigation with Mouse Wheel and Hamburger Menu