Bootstrap Friendly - Try it code with live demo

Go back to tutorial

<!DOCTYPE html>
    <html lang="en">

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

.read-more {
            display: none;
        }
        </style>
    </head>

<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>
        <script>
            $(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');
                }
            });
        });
        </script>
    </body>

</html>

xxxxxxxxxx
 
<!DOCTYPE html>
    <html lang="en">
​
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Try it your self</title>
        <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>
        <style>
            .content_area {
            max-height: 190px;
            overflow: hidden;
            transition: max-height 0.5s ease;
        }
​
        .show-content {
            max-height: none;
        }
​
        .read-more {
            display: none;
        }
        </style>
    </head>
​
    <body>
        <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.