Published July 29, 2015
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.
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 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.