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:
General sibling selector (~)
Adjacent sibling selector (+)
The checkbox hack
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.
See the Pen Lessons to prepare for the checkbox hack by SitePoint (@SitePoint) on CodePen.
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:
[code language="css"]
One
Two
Three
Four
Five
Six
[/code]
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.
Defining Basic Styles
After structuring the demo, we define a few reset styles for our elements. Nothing fancy, just some simple CSS rules that will allow us to enhance the appearance of our component. Have a look at the two rule sets below:
[code language="css"]
ul {
width: 50%;
margin-left: auto;
margin-right: auto;
list-style-type: none;
background: white;
}
li {
height: 50px;
line-height: 50px;
border-top: 1px solid #e9ecef;
}
[/code]
Styling the Checkbox Container
In this part of the tutorial, we will set up the styles for the last list item.
First, we change the value of the aforementioned height property. Then, we set its position to relative. This property value is important because it will help us position the label element:
[code language="css"]
.container {
position: relative;
height: auto;
}
[/code]
Next, we hide the checkbox:
[code language="css"]
[type="checkbox"] {
position: absolute;
left: -9999px;
}
[/code]
…and style the relevant label:
[code language="css"]
label {
background: #e4e3df;
display: block;
width: 100%;
height: 50px;
cursor: pointer;
position: absolute;
top: 0;
}
[/code]
Notice that we position our label absolutely and give it a top offset of 0 pixels. So now you might be wondering if we really need those two properties. At first glance they seem unnecessary. But as we’ll see in a moment, these are required declarations.
If you look back at the HTML structure, you’ll see that the label is an empty element. We made that assumption because we want its content to change depending on the checkbox state. To achieve this, we take advantage of CSS’s pseudo-elements. When the checkbox isn’t checked (default behavior), the More keyword appears. Also, for styling we use a few characters taken from the lovely CopyPasteCharacter web app.
Continue reading %Implementing “Show More/Less” Functionality with Pure CSS%