CSS Show Hide div on Click without JavaScript

Creating interactive stuff without JavaScript is an art. This tutorial covers an example of this art in which you will learn to create CSS show hide div on click without JavaScript.

Basically, toggling a div element is easy when we use JavaScript. It becomes easier when we use the jQuery (write less do more JS library) slideToggle() method. But what about creating jQuery alternative slideToggle() function with pure CSS? Well! it will amaze you if you don’t know the power of pure CSS. Here, I’m going to use HTML checkbox, label (for toggle button), and a div element to create the same slide toggle functionality.

You can integrate this method to create a pure CSS accordion or show/hide div with a smooth transition. Ready to get started with coding? wait, before this, I would suggest you check out the demo page to feel the smooth transition of closing and opening of the div element. 😀

The HTML Structure

In HTML, create a label element with the class name "toggle" and define the "for" attribute with "item-3" value.  Similarly, create a checkbox input with an id "item-3" and define its class name "hide-input". Create the div element just after the checkbox input and assign a class name "toggle-el" to it. Place your content inside that div and wrap all elements into the main tag.

<main>
  <label for="item-3" class="toggle">Toggle Div</label>
  <input type="checkbox" name="one" id="item-3" class="hide-input">
  <div class="toggle-el">
    <div>
      <p>Your content goes here... </p>

    </div>
  </div>

  <p>Your content outside the hide/show div.</p>
</main>

The main tag is optional to align the content area. You can exclude it according to your choice. Place the above HTML code in your project where you want to display the show/hide div.

Note: There shouldn’t be any element between the checkbox and the div element that you want to make collapsible.

The CSS Styles to Show Hide div on Click

The main tag is the container element of the div that we are going to show/hide. Select it in CSS, define its width as 100% along with the 720px max-width. Similarly, define padding property with 2rem value to leave some space around the main. Specify margin with 0 auto value to align it to the center of the page.

Basically, the main tag is optional. You may exclude it or style it according to your webpage where you want to implement the show/hide div element.

main {
  width: 100%;
  max-width: 720px;
  padding: 2rem;
  margin: 0 auto;
}

After that, select the "toggle-el" class and define a fixed height according to the length of content inside it. The second important property for this element is overflow with hidden value. Likewise, the transition is also necessary for a smooth show/hide sliding transition. On the other hand, the background color and margin can be defined according to your choice.

.toggle-el {
  padding: 2rem;
  height: 240px;
  background: white;
  transition: all 0.2s ease;
  opacity: 1;
  margin-top: 1rem;
  overflow: hidden;
}

Now,  target the checkbox input that has "hide-input" class with a checked pseudo selector and select the "toggle-el" class with (just after element method) plus symbol. Here, you need to set 0 values for height, opacity, and padding property. It will collapse the height of the div element when the checkbox will be checked. Oppositely, the div element will be returned to its previous state (show) when the checkbox is unchecked.

input[type=checkbox].hide-input:checked + .toggle-el {
  height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

We don’t need to show the checkbox input to users. So, disappear the checkbox input by defining absolute position with -999em left value. You can also use a display property with none value to hide the checkbox.

input.hide-input {
  position: absolute;
  left: -999em;
}

Finally, design the label tag as a button that will show the users to toggle (show/hide) the div element. To do so, select the label element that has "toggle" class and display it as an inline-block. Similarly, define padding, cursor, font size, background color, and border-radius property with the following values. In order to avoid text selection of the label, use the CSS user-select property with none value.

label.toggle {
  text-align: center;
  display: inline-block;
  cursor: pointer;
  padding: 0.5em 1em;
  font-size: 1rem;
  color: #242424;
  background: #b5b5b5;
  border-radius: 3px;
  user-select: none;
}

That’s all! I hope, you have successfully created CSS show hide div on click without JavaScript. If you have any questions or suggestions, let me know by comment below. Happy coding 😊