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 lets users 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
Get Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show More / Show Less</title>
<style>
/* Hide the extra content by default */
.more-content p {
display: none;
}
#check{
display:none;
}
/* Style for the show more and show less labels */
label {
display: block;
cursor: pointer;
color: white;
padding: 8px;
background: green;
width: 80px;
}
/* When the checkbox is checked, display the extra content and show the "Show less" label */
#check:checked ~ .more-content p {
display: block;
}
#check:checked ~ label.show-more {
display: none;
}
/* When the "Show less" checkbox is checked, hide the extra content and show the "Show more" label */
#check:not(:checked) ~ .more-content p {
display: none;
}
#check:not(:checked) ~ label.show-less {
display: none;
}
</style>
</head>
<body>
<div>
<input type="checkbox" id="check">
hello
<div class="more-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<label for="check" class="show-more">Show more</label>
<label for="check" class="show-less">Show less</label>
</div>
</body>
</html>
This code is for creating a “Show More / Show Less” functionality using HTML and CSS. Let’s break down how it works:
- HTML Structure:
- The HTML structure consists of a checkbox input (
<input type="checkbox" id="check">) followed by some content (in this case, the word “hello”) and a<div>with the class “more-content” containing additional content that we want to show or hide. - Two
<label>elements are used for the “Show more” and “Show less” functionality. They are associated with the checkbox using theforattribute, which should match theidof the checkbox.
- CSS Styling:
- Initially, the extra content inside the
<div>with class “more-content” is hidden (display: none;). - The “Show more” and “Show less” labels are styled to be blocks with a background color of green and white text.
- The “Show more” label is displayed when the checkbox is unchecked (
#check:not(:checked) ~ label.show-more). This label is shown to allow the user to expand the content. - The “Show less” label is displayed when the checkbox is checked (
#check:checked ~ label.show-less). This label is shown to allow the user to collapse the content. - When the checkbox is checked (
#check:checked ~ .more-content p), the extra content is displayed (display: block;).
- Functionality:
- Clicking on the “Show more” label triggers the checkbox, which in turn shows the extra content by checking it.
- Clicking on the “Show less” label triggers the checkbox, which in turn hides the extra content by unchecking it.
This code provides a simple way to toggle between showing more or less content without requiring JavaScript. It’s a pure CSS solution using the :checked pseudo-class to determine the state of the checkbox and adjust the visibility of the content accordingly.
