Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / create read more / read less function via jquery
Ask Question

Create Read More / Read Less function via jQuery

Ethan Karla 388 28 Jul 2021

How to create Read More / Read Less function via jQuery?

jquery jquery
Updated 26 Nov 2023
Ethan Karla
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Message

1 Answers

Aryan Kumar
Aryan Kumar 26 Nov 2023
Report Abuse

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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Read More / Read Less with jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <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;
    }
  </style>
</head>
<body>

<div class="content">
  <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.
  </p>
</div>

<div class="read-more">Read More</div>

<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
    });
  });
</script>

</body>
</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.

MindStick Training