Home
Contact
Category
PHP
Login registration
Table sorting drag and drop
PHP Basic
PHP Advance
PHP API
File handling
jQuery
Submit form using ajax
More dropdown button in navigation
Dynamic form field
Datatable
jQuery Basic
jQuery Advance
How to
MYSQL
How to PHP
Design Snippets
Bootstrap 4
Bootstrap 5
Custom CSS
Javascript
JS Form
JS basic
JS Advance
PHP Ajax
Form Handling
Jquery UI
Dragable
jQuery UI Advance
PHP-MYSQL
CRUD Operatoins
Ctrl + /
Search Result:
3
Brad Diesel
Call me whenever you can...
4 Hours Ago
John Pierce
I got your message bro
4 Hours Ago
Nora Silvester
The subject goes here
4 Hours Ago
See All Messages
15
15 Notifications
4 new messages
3 mins
8 friend requests
12 hours
3 new reports
2 days
See All Notifications
Try It Yourself
Run
Go to tutorial
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Read More Read Less</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <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. </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.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'; } }; } </script> </body> </html>
OOps! You are currently offline.