Css Show Hide Div On Click Without Javascript

Here’s a comprehensive guide on how to Css Show Hide Div On Click Without Javascript. This tutorial leverages the power of CSS and HTML to create interactive elements without relying on JavaScript.

Setting Up Your Document

Before we dive into the code, it’s important to make sure you have a basic HTML structure set up. You might want to add some basic styles or import a CSS reset to normalize styles across browsers.

Creating the HTML Structure

The core of this technique lies in using a checkbox and CSS selectors to toggle the visibility of elements. Here’s the HTML you’ll need:

<div class="container">
  <input type="checkbox" id="checkTab" name="checkTab" checked/>
  <label class="menu" for="checkTab">
      <span class="icon"></span>
  </label>
  <div class="tabs">
    <div class="nav-box">
      <button class="nav-a">Yesterday</button>
      <button class="nav-b">Tomorrow</button>
      <div class="content-box">
        <div class="content-a">Yesterday Content</div>
        <div class="content-b">Tomorrow Content</div>
      </div>
    </div>
  </div>
</div>

Styling with CSS

Now, let’s style the HTML elements to achieve the desired show/hide effect and visual appearance. The following CSS rules control the appearance and behavior of the elements:

body {
  background: #CDD9ED;
}
.container {
  position: relative;
  width: 380px;
  margin: 50px auto;
}
.menu {
  z-index: 1;
  position: absolute;
  top: -8px;
  right: -8px;
  display: block;
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: #99A3BA;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #CDD9ED;
  background: #fff;
  transition: all .3s ease;
}
#checkTab {
  display: none;
}
.menu .icon {
  position: absolute;
  top: 15px;
  left: 8px;
  width: 12px;
  height: 1px;
  background: currentColor;
  transition: width .3s ease;
}
.menu .icon:before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width .3s;
}
.menu .icon:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 12px;
  height: 1px;
  background: currentColor;
  transition: width .3s;
}
#checkTab:checked ~ .menu:hover {
  transform: rotate(45deg);
}
#checkTab:not(:checked) ~ .menu {
  box-shadow: 0 2px 12px -2px rgba(18, 22, 33, .1);
}
#checkTab:not(:checked) ~ .menu:hover .icon,
#checkTab:not(:checked) ~ .menu:hover .icon::before,
#checkTab:not(:checked) ~ .menu:hover .icon::after {
  width: 14px;
  transition: all .3s ease;
}
#checkTab:not(:checked) ~ .menu:hover .icon {
  background: currentColor;
}
#checkTab:not(:checked) ~ .tabs {
  display: none;
}
#checkTab:checked ~ .menu .icon {
  background: transparent;
}
#checkTab:checked ~ .menu .icon:before {
  width: 14px;
  position: absolute;
  top: 0px;
  transform: rotate(45deg);
  transition: all .3s ease;
}
#checkTab:checked ~ .menu .icon:after {
  width: 14px;
  position: absolute;
  top: 0px;
  transform: rotate(-45deg);
  transition: all .3s ease;
}

.tabs {
  width: 380px;
  border-radius: 6px;
  box-shadow: 0 4px 24px -2px rgba(18, 22, 33, .1);
  background: #fff;
  color: #6C7486;
}
.nav-box {
  font-size: 0;
}
button {
  z-index: 10;
  position: relative;
  width: 24%;
  height: 60px;
  margin-left: 6%;
  margin-bottom: -1px;
  box-sizing: border-box;
  outline: none;
  background: #fff;
  border: 0;
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  font-weight: 500;
  color:  #99A3BA;
  cursor: pointer;
}
button:focus-within {
  border-bottom: 1px solid #5628EE;
  color: #5628EE;
  transition: color .3s ease;
}
.content-box {
  position: relative;
  width: 100%;
  height: 300px;
  border-top: 1px solid #E4ECFA;
  border-radius: 0 0 6px 6px;
  background: #fff;
  font-size: 14px;
}
.content-box > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.nav-box:not(:focus-within) .nav-a {
  border-bottom: 1px solid #5628EE;
  color: #5628EE;
}
.nav-box:not(:focus-within) .content-a {
  display: block;
}
.nav-a:focus-within ~ .content-box .content-a {
  display: block;
}
.nav-b:focus-within ~ .content-box .content-b {
  display: block;
}

By following this tutorial, you should now be able to implement Css Show Hide Div On Click Without Javascript. If you have any questions, feel free to leave a comment.