Pure CSS3 Slide Down Toggle

A slide toggle functionality is a common feature to show/hide content on a webpage. It is mostly used in FAQs accordion, menu navs, and toggleable contents. Basically, we need a JavaScript function to capture the click event and switch the open/close class to make a slide down/up feature on the webpage. But, here you will come to know the pure CSS3 technique to create slide down toggle functionality.

As you have seen on the demo page (browse if you didn’t see it yet), the slide down smoothly shows/hides the nav contents without realizing that’s built with pure CSS. Well, it is quite similar to the jQuery toggleSlide() function but powered by CSS. So, what’s the secret behind it? If you are familiar with pure CSS, you definitely come to know the use of HTML input elements to capture the click event and style the other elements accordingly to achieve the idea.

Generally, you can integrate this snippet into the accordion menu, toggleable content, or dropdown projects. Anyhow, you don’t need to do extra effort if you want an accordion without JavaScript. OK! let’s cover the coding method to create a pure CSS3 slide down toggle feature.

The HTML Code

In the first step, create the input element with the type "checkbox" and define its unique id "vwa__toggle". Similarly, create a label tag just after the checkbox and associate it with the input using the "for" attribute. Create a div element with a class name "vwa__container" and place the content that you want to show before the slide toggle.

Similarly, create a div element with a class name "vwa__painel" and place the content inside it that you want to show/hide with a smooth slide up/down feature.

<input type="checkbox" name="toggle" id="vwa__toggle" />
<label for="vwa__toggle"></label>

<div class="vwa__container">
   <h1>Pure CSS3 Slide Down Toggle Demo</h1>
  <h2> Click the Open button to see hidden mesage.</h2>
    
     <a href="https://codeconvey.com/pure-css3-slide-down-toggle">Back to Tutorial</a> 
</div>
  
<div class="vwa__painel">

    <h1> hello, I'm a hidden message. You found it.</h1>
<p>Now Click the Heart button in the bottom to support CSS3</p>
  
</div>

You can place any other HTML element inside the penal, it will display when the penal slides down. Similarly, you can place the custom text inside the button and style it accordingly.

The CSS3 Styles for Slide Down Toggle

In CSS, select :root CSS pseudo-class and define the color values for the variables. We’ll use these variables in the next CSS code blocks to apply background, button, and icon colors.

:root {
  --bg: #cfcfcf;
  --bt: #eeff00;
  --cor2: #eeff00;
  --icons: #222;
}

Now, select the "vwa__painel" class (which is the toggleable sliding area) and define its background color. Set its fixed height with 100% of the width that we’ll use to animate/collapse the penal. Then define its absolute position in order to smoothly slide down and up. Keep the left value 0 and the top value equal to the height value but in minus. Likewise, define the padding property to leave some space around the penal.

Everything is fine till here, but the content inside it will be overlapped. To fix that, you need to use the overflow property with "hidden" value so that contents don’t display when it has collapsed. On the other hand, use the box-sizing property to let the CSS calculate the padding value in its width. To make it look a little more interesting, we’ll use the CSS transition property to make its motion smooth. So, use the cubic-bezier function to set the transition value.

.vwa__painel {
  background: #181818;
  color: #fff;
  position: absolute;
  top: -250px;
  left: 0;
  width: 100%;
  height: 250px;
  padding: 20px;
  transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  overflow: hidden;
  box-sizing: border-box;
}

After that, select the toggle button using its id attribute "#vwa__toggle" and define its absolute position. As we used this id for the input element in the HTML to functionalize the sliding toggle and we don’t want to display it to the users. Therefore, use the -1oo% value for both left and the top properties to disappear from the webpage. Similarly, use the appearance property with "none" value as a fallback to completely hide from all browsers.

#vwa__toggle {
  position: absolute;
  appearance: none;
  cursor: pointer;
  left: -100%;
  top: -100%;
}

Target the label element with the plus symbol selector (element just after the element) and set its absolute position. In reference to the DOM, the label element comes just after the input tag (that has #vwa__toggle id). So, I used the plus symbol between the id of the input and the label to style and functionalize the slide toggle.

Basically, you can style it according to your needs. But, if you want to make it just like shown on the demo page, then define a 60px value for width and height. In order to set it to the center of the page, display it as a flexbox and define the center value for the justify-content property. Define the background property and set –bt color variable value for it. Similarly, define padding, line height, font size, text-align, cursor, and transition properties as follows:

#vwa__toggle + label {
  font-family: remixicon;
  position: absolute;
  cursor: pointer;
  padding: 10px;
  background: var(--bt);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding:0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icons);
  line-height: 20px;
  font-size: 30px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  transition: all 500ms ease;
  left: 50%;
  transform: translate(-50%, 10px);
}

Select label :after pseudo-class with the same rule and define the icon value inside the content property as follow:

#vwa__toggle + label:after {
  content: "\EA13";
}

After styling the both penal and button element, now define the styles for the "vwa__container" class that is the wrapper element. Define the padding value, text-align and transition value for margin as follows:

.vwa__container {
  transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding: 15em 3em;
  text-align: center;
}

We have everything ready so far to open and close the penal. Now we’ll use sibling combinator ~ to select the penal when the checkbox has checked value. For this scenario, define the 0 value for the top property in order to show the penal. Likewise, select the container and define its margin-top value according to the height of the penal. On the other hand, select the label element with plus and :after selector and change the background value to display it as active.

#vwa__toggle:checked ~ .vwa__painel {
  top: 0;
}

#vwa__toggle:checked ~ .vwa__container {
  margin-top: 250px;
}

#vwa__toggle:checked + label {
  background: var(--bt);
  color: var(--icons);
  transition: .5s linear;
}

Finally, select the label element using :after pseudo selector with checked value and change its content value to change the icon.

#vwa__toggle:checked + label:after {
  content: "\EB99";
  transition: .5s linear;
}

That’s all! I hope you have successfully created a slide down toggle button using the pure CSS3 technique. If you have any questions or suggestions, let me know by commenting below.

You Might Be Interested In: