Create Read More / Read Less function via jQuery

Question

Aryan Kumar · Answer

Creating a "Read More" / "Read Less" functionality with jQuery involves toggling the visibility of content based on user interactions. Below is an example of how you can implement a simple "Read More" / "Read Less" feature:
andlt;!DOCTYPE html>
andlt;html lang="en">
andlt;head>
  andlt;meta charset="UTF-8">
  andlt;meta name="viewport" content="width=device-width, initial-scale=1.0">
  andlt;title>Read More / Read Less with jQueryandlt;/title>
  andlt;script src="https://code.jquery.com/jquery-3.6.4.min.js">andlt;/script>
  andlt;style>
    .content {
      max-height: 100px; /* Set a max height for the content */
      overflow: hidden;
      transition: max-height 0.3s ease-out; /* Add a smooth transition effect */
    }
    .read-more {
      cursor: pointer;
      color: blue;
    }
  andlt;/style>
andlt;/head>
andlt;body>
andlt;div class="content">
  andlt;p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius nisl ac mauris
    ultrices, vel varius justo fermentum. Integer in dui sit amet nulla efficitur vestibulum.
    Suspendisse sed lectus vel arcu cursus volutpat.
  andlt;/p>
andlt;/div>
andlt;div class="read-more">Read Moreandlt;/div>
andlt;script>
  $(document).ready(function() {
    var content = $('.content');
    var readMoreButton = $('.read-more');
    readMoreButton.on('click', function() {
      content.toggleClass('expanded'); // Toggle the 'expanded' class
      var isExpanded = content.hasClass('expanded');
      // Adjust the text of the button based on the content state
      readMoreButton.text(isExpanded ? 'Read Less' : 'Read More');
      content.css('max-height', isExpanded ? 'none' : '100px'); // Set max-height accordingly
    });
  });
andlt;/script>
andlt;/body>
andlt;/html>
In this example:
The content is initially limited to a maximum height, and the overflow is hidden.The "Read More" button toggles the visibility of the content by adding or removing the
expanded class.The max-height property is adjusted with a smooth transition effect to create the "Read More" / "Read Less" animation.You can customize the max-height value and styling to fit the design of your website.
This is a basic example, and you might need to adapt it based on the structure and requirements of your specific project.

forum

Create Read More / Read Less function via jQuery

Ethan Karla

Can you answer this question?

1 Answers

Liked By