Show More / Show Less Html Code

Let’s explore a simple and effective way to implement the Show More / Show Less Html Code functionality on your webpage. This tutorial will guide you through creating expandable content sections with just HTML, CSS, and JavaScript.

Step 1: HTML Structure

First, we need to define the HTML structure for our content containers. Each container will have a content section that can be expanded or collapsed.

  <div class="container">
    <div class="content">
      <p>
        Content for container 1.
        orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
      </p>
    </div>
  </div>

  <div class="container">
    <div class="content">
      <p>
        Content for container 2.
       orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
      </p>
    </div>
  </div>

Step 2: CSS Styling

Now, let’s add some CSS to style the containers and the Show More/Less button. This will control the initial height of the content and provide a smooth transition effect.

.container {
      max-width: 600px;
      margin: 20px auto;
      font-family: Arial, sans-serif;
    }

    .content {
      max-height: 100px; /* Adjust the initial max-height as needed */
      overflow: hidden;
      transition: max-height 0.3s ease; /* Add smooth transition effect */
    }

    .show-more {
      cursor: pointer;
      color: #607186;
      display: block;
     background-color:linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 1) 100% );
    }

Step 3: JavaScript Functionality

Finally, we’ll use JavaScript to toggle the visibility of the content and change the button text dynamically. This script will add the Show More/Less button and handle the click event.

document.addEventListener('DOMContentLoaded', function () {
      const contentContainers = document.querySelectorAll('.content');
      
      contentContainers.forEach((content, index) => {
        const showMoreButton = document.createElement('div');
        showMoreButton.classList.add('show-more');
        showMoreButton.innerHTML = 'Show more &#9660'; // Use ▲ for chevron-up
        content.parentNode.insertBefore(showMoreButton, content.nextSibling);

        showMoreButton.addEventListener('click', function () {
          if (content.style.maxHeight) {
            content.style.maxHeight = null;
            showMoreButton.innerHTML = 'Show more &#9660'; // Use ▲ for chevron-up
          } else {
            content.style.maxHeight = content.scrollHeight + 'px';
            showMoreButton.innerHTML = 'Show less &#9650'; // Use ▼ for chevron-down
          }
        });
      });
    });

That’s it! You’ve successfully implemented the Show More / Show Less Html Code functionality.