Extract form SitePoint article “Implementing “Show More/Less” Functionality with Pure CSS” by George Martsoukos
Published July 29, 2015
Nowadays developers take advantage of different CSS techniques to create sliders, modals, tooltips, and many more Javascript-based components.
In this article, we’ll work with some of those techniques to implement what we might refer to as the “Show More/Less” functionality, and doing it without writing any JavaScript. We’ll also create a fully functional accordion-style show/hide demo that you can use as a starting point for your projects.
We have a lot to cover (techniques, pitfalls, and challenges), so let’s get started!
Note: This article will not discuss how to make this component accessible, but that could certainly be a valid improvement and maybe a topic for another post.
CSS Requirements
To better understand the process for creating this functionality, you have to be familiar with the following key CSS concepts:
To help out, I’ve created a demo, which you can see below, to give you the knowledge needed to follow along with this article.
Just click on one of the buttons to view a description and demo of the technique.
The Markup
The HTML structure for our demo is shown below:
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li class="container">
<input type="checkbox" id="check_id">
<label for="check_id"></label>
<ul>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
<!-- more list items here -->
</ul>
</li>
</ul>
As you can see, we define an unordered list with five list items. The last item acts as the container for our checkbox and its corresponding label. In addition, we include a second unordered list within the wrapper element. This list holds the items that we want to show as soon as the checkbox becomes checked.