How to toggle a slide effect with JavaScript

Updated: 25-Jul-2022 / Tags: Javascript Tutorials / Views: 388 - Author: George

Introduction

Hello everyone, in this tutorial we are going to learn how to create a toggle slide down, and up effect. Basically toggle means that we are alternating between two states, or two modes.

In the example below we have a button that says Read Info. By clicking once on that button a text paragraph will become visible and slide down. Clicking again on the button the text paragraph will slide up, and become hidden.

Give it a try.

Let's see how we code this.

The html code

Our html code is simple.

<body>
	<button class="trigger">Read Info</button>

	<div class="content">
		<p class="text">
			Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
			Cupiditate eum sit debitis pariatur quam id a illo distinctio, 
			odit voluptate natus, accusamus, dolor. Aperiam, at. 
			Consequatur nemo repellat, quidem eos id aut minima 
			minus maxime iusto tempora debitis explicabo tempore, velit 
			modi neque ratione magnam cupiditate cumque laborum labore. 
			Eius odit dolor magni nemo aspernatur dolorem officia doloremque, nihil, 
			blanditiis inventore corrupti non assumenda harum aperiam incidunt. 
		</p>
	</div>
</body>

In line 2 we have the read info button which has a class of "trigger".
In line 4 we have a div element with a class of "content". This is the element that we are going to target with javascript to apply the slide toggle.
The p tag with the class of "text" exists only to style the text. It is not important for the toggle effect to work.

Let's see now some important rules that we have to set in the css code.

The css

To achieve the slide effect, we have to set some important properties to the content element.

.content{
	margin-top: 30px;
	line-height: 28px;
	max-height: 0;
	overflow: hidden;
	transition: max-height .2s;
}

In line 4 we set the max-height property to zero. We use the max-height property because it's animatable.
In line 5 we set the overflow property to hidden. In this stage the content element is hidden.
And in line 6 we add a transition effect to the max-height property, so when we change the value from the javascript we will have that slide effect.

Now let's go and write the javascript code.

The javascript code

Let's take a closer look on our javascript code.

let trigger = document.querySelector(".trigger");
let content = document.querySelector(".content");

trigger.onclick = function(){
   if(content.style.maxHeight == 0){
      content.style.maxHeight = content.scrollHeight + "px";
   }else{
      content.removeAttribute("style");
   }
}

In line 1 we get access to the button which has a class of "trigger".
In line 2 we get access to the content element.
In line 4 we assigning an onclick event-listener on the button. So every time we click on the button a function will run.
Inside the function we are going to use an if statement and we are going to check the max-height value of our container. We know that the value is zero because we set the value to zero in the css file.
So in line 5 we are saying that if the max-height value is zero, then we get the actual height of the content element using the scrollHeight property, and assign the value to the max-height property in line 6.
```
content.style.maxHeight = content.scrollHeight + "px";
```
This will slide the content down.
But if the max-height value is not zero, that means that the content element is already visible, so we remove the style attribute in line 8, and the content element will slide back up.
```
content.removeAttribute("style");
```

Summary

So this is how we can toggle a slide effect up, and down with JavaScript.
It's simple and easy enough. I hope you liked it.

Last Words

Thanks for reading, i hope you find the article helpful.
Please leave a comment if you find any error's, so i can update the page with the correct code.

Source code

You can download the source code and use it in any way you like.

Times downloaded: 38

Buy me a coffee

If you like to say thanks, you can buy me a coffee.

Buy me a coffee with paypal

Comment section

You can leave a comment, it will help me a lot.

Or you can just say hi. 😉

Created By Digitalfox

thumbnail of a responsive navigation system

Responsive navigation with working login system using PHP Mysql and Ajax

Responsive navigation menu that integrates a secure login and register system, with a forgot password action, and a contact form.
The whole system is animated in slide-in sidebars and shows up on the right side of the web-design.