Html – how can i do a show more/ show less animated button to hide a part of a text

First, you'll need to include the Font Awesome library in your HTML file. You can add the following link in the head section of your HTML file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    

<div class="qodef-m-content">
      <p class="qodef-m-text long-text">
        <!-- Your long text goes here -->
      </p>
      <button class="show-more-btn"><i class="fas fa-chevron-down"></i> Show More</button>
    </div>
    
    <style>
      .qodef-m-text {
        /* Your existing CSS styles */
        height: 200px; /* Set a fixed height for the initial display */
        overflow: hidden; /* Hide overflowing content */
        transition: height 0.3s ease; /* Add smooth animation on height change */
      }
    
      .qodef-m-content.collapsed .qodef-m-text {
        height: auto; /* Expand the height to show the full content */
      }
    
      .show-more-btn {
        /* Your button styling */
        display: block;
        margin-top: 10px;
        background: none;
        border: none;
        cursor: pointer;
      }
    </style>
    
    <script>
      const textContainer = document.querySelector('.qodef-m-text');
      const showMoreBtn = document.querySelector('.show-more-btn');
      const collapsedClass = 'collapsed';
    
      showMoreBtn.addEventListener('click', function() {
        textContainer.classList.toggle(collapsedClass);
        if (textContainer.classList.contains(collapsedClass)) {
          showMoreBtn.innerHTML = '<i class="fas fa-chevron-down"></i> Show More';
        } else {
          showMoreBtn.innerHTML = '<i class="fas fa-chevron-up"></i> Show Less';
        }
      });
    </script>