Article: Implementing “Show More/Less” Functionality with Pure CSS

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:

  <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>
      <li><a href="#">Five</a></li>
      <li><a href="#">Six</a></li>
      <!-- more list items here -->

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.

Continue reading article on SitePoint …

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.