Pure CSS Toggleable Content

These days, it’s very simple to use jQuery to make a toggle or accordion feature that shows or hides content based on a button click and it’s almost mindlessly easy with .toggle(). But, what if I wanted to use pure CSS and no javascript at all? Well, it’s actually not that hard - it just requires some pseudo-elements and a good understanding of CSS.

Here’s an example of the HTML:

<div id="tabs">
        <input type="checkbox" id="tab1">
        <label class="tab-label" for="tab1">Read More</label>
        <div class="tab-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
</div>

Be sure to match the id on the checkbox with the for on the label. It needs this so that clicking on it can set the checkbox as checked. We’ll use the pseudo selector :checked to know when to show or hide the content.

There’s also some styling in there to make the button look nice but we kept it pretty basic and you can do whatever you want here. We purposely kept it simple to make it easier to follow.

Here’s the CSS:

/* set up the basic structure and styling of the content */
#tabs{
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

/* hide the actual checkbox */
#tab1{display: none}

.tab-label{
  padding: 15px 20px;
  background: #15d5a9;
  color: white;
  font-size: 18px;
  order: 1; /* moves the button below the content */
  margin: 10px 0;
  cursor: pointer;
}

/* this hides the content if it's not checked */ 
input[type=checkbox]:not(checked) ~ .tab-content {
    display: none;
}

/* this shows the content if it is checked */ 
input[type=checkbox]:checked ~ .tab-content {     
    display: block;
}

And here’s the finished product and what it would actually look like (click the read more button):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.