Show More Show Less Using CSS

Show More Show Less Using CSS

In today’s fast-paced world, the user experience of a website has become a crucial factor in determining its success. One of the ways to improve user experience is by using the show more show less technique. This technique enables users to view more content on a page without overwhelming them with too much information. In this article, we will discuss how to implement the show more show less technique using CSS.

What is Show More Show Less?

Show more show less is a technique used to display long blocks of content on a page. This technique is implemented by showing only a portion of the content initially and allowing the user to view more by clicking a “Show More” button. Similarly, the user can also hide the additional content by clicking a “Show Less” button.

Why Use Show More Show Less?

Using the show more show less technique can significantly improve the user experience of a website. It helps to declutter the page by hiding lengthy content that might not be relevant to all users. Additionally, this technique reduces scrolling and loading times, improving the website’s performance.

Imagine you walk into an ice cream shop, but you're given ALL the flavors at once - overwhelming, right? Similarly, a website throwing all the information, just like those flavors, can be too much. That's why clicking on 'Show More' is like asking for extra scoops only when you want them, making it easy and fun.

Now think about playing hide and seek. Once you've had your fill of the game, you say 'game over'! In the same way, the 'Show Less' button acts like your 'game over.' It tucks away the extra information you no longer need, making the website cleaner and better just like a neat playroom after games! In the magical world of websites, it's as easy as a game.

Implementing Show More Show Less Using CSS

Show More Show Less Using CSS

Get Code

<mark style="background-color:#fcb900" class="has-inline-color"><!DOCTYPE html>
<html>
  <head>
    <title>Show More/Less with Pure CSS</title>
    <style>
      /* Hide extra content */
      .morecontent span {
        display: none;
      }
      /* Show "Show More" button */
      .morelink {
        display: block;
      }
      /* Hide "Show Less" button */
      .lesslink {
        display: none;
      }
      /* Hide checkbox */
      #more {
        display: none;
      }
      /* Checkbox checked, show content */
      #more:checked ~ .morecontent span {
        display: inline;
      }
      /* Checkbox checked, hide "Show More" button */
      #more:checked ~ .morelink {
        display: none;
      }
      /* Checkbox checked, show "Show Less" button */
      #more:checked ~ .lesslink {
        display: block;
      }
    </style>
  </head>
  <body>
    <h2>Example of "Show More/Less" with Pure CSS</h2>
    <div class="morecontent">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor tincidunt augue sit amet ultricies. Phasellus nec lectus nec dolor aliquam hendrerit. Sed in quam in odio bibendum rhoncus. Nulla facilisi. Nullam id augue id velit scelerisque bibendum. Aliquam vitae tortor vel augue placerat fringilla.
      </p>

      <span>
        Donec volutpat, odio vel accumsan aliquam, ipsum augue bibendum quam, eu iaculis ipsum sapien vel enim. Sed mollis convallis orci, sed fermentum leo tincidunt id. Duis auctor, felis non tempus porta, sem turpis varius ante, non fermentum mi urna eu enim. 
      </span>

    </div>

    <label for="more" class="morelink">Show More</label>
    <input type="checkbox" id="more" />
    <div class="morecontent">

      <span>
        Mauris id justo et quam tincidunt rutrum. Nam vitae suscipit urna. Nulla facilisi. Aliquam nec eleifend enim. Proin semper, nulla id facilisis tempus, tortor arcu lacinia purus, non lobortis nibh nibh vel elit. In sed lacus elit. 
      </span>
      <br />
      <label for="more" class="lesslink">Show Less</label>
    </div>
  </body>
</html>
</mark>

a new CSS selector to hide the “Show Less” button by default, and a new CSS selector to show the “Show Less” button when the checkbox is checked. The updated HTML code includes a new span element with additional content, and a new label element with the class lesslink to serve as the “Show Less” button.

CSS Multiple Animations Complete Guide