Slide Toggle elements using jQuery


In this lesson, you will learn how to display a hidden web element or hide an already visible element using jQuery sliding up or down effects. This kind of animation can be achieved using .slideUp() and .slideDown() functions, as we have learned in the previous lesson. But to minimize the code, the right method is .slideToggle(), which can hide a selected element on the web page, if it’s visible or shows an element if it is hidden from the layout.

Slide Toggle elements in jQuery

The .slideToggle() does the checking about the visibility status of the web element internally so you don’t have to write any conditions to execute the effect.

The syntax of .slideToggle() function in jQuery is:

.slideToggle( [duration ] [, easing function ] [, callback function ] )

You can skip one or all of these parameters as they are optional. When you skip any parameter, the function will use the default value for the skipped parameter.

Duration is the first parameter and specifies the time the animation will take to complete. Let’s say you want to slow down the animation over 12 seconds, then you have to pass 12000 milliseconds in the parameter. Duration is defined in milliseconds and 1 second is equal to 1000 milliseconds. You can also use string values like slow, normal, and fast to specify the time. These are equal to 600, 400, and 200 milliseconds.

In case you missed this parameter, the default value is used which is 400 and equal to ‘normal’ speed.

Easing function refers to the speed of the animation at different points of the animation. The default value is swing which makes animations to go slighter faster at starting and ending points while keeping the constant speed at other points. Linear is another easing function which maintains the equal speed of the animation at all points.

Example of Slide Toggle elements in jQuery

In this example, we will start with a hidden div of equal height and weight. When you will click on the Show box hyperlink, the div will appear over the span of 6 seconds. As soon as the animation is completed, the text of the hyperlink changes to Hide box. This example is similar to the previous lesson’s example, but this example uses one .slideToggle() function instead of two functions – .slideUp() and .slideDown().

slideToggle() Example
slideToggle() Result

The HTML

<div id="container">
   <div class="box one"></div>
   <p><a href="#" id="anim">Show box</a></p>
</div>

The CSS

* {
	box-sizing: border-box;
}

body {
	font-family: 'Open Sans', sans-serif;
	color: #333;
	font-size: 14px;
}

.box {
	width: 100px;
	height: 100px;
	margin: 2px;
	display: none;
}

.one {
	background-color: #d9eb4b;
}

The jQuery

< script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" >
	</script>  
        <script>
	$(document).ready(function () {
		$('#anim').click(function () {
			$('.box').slideToggle('6000', function () {
				if ($('.box').is(':hidden')) {
					$('#anim').text("Show box");
				} else {
					$('#anim').text("Hide box");
				}
			});
		});
	}); </script>

By using .slideToggle() the lines of code have been reduced significantly.

To understand this lesson, you should try out the code given the example above yourself. In case you have any question regarding these three sliding functions, please leave your question in the comment section below.

jQuery slideDown Elements Tutorial Home jQuery Animating Elements

 

Tutorials Panel

About Tutorials Panel

programming tutorial and source code for Software Engineers and developers. https://twitter.com/TutorialsPanel

View all posts by Tutorials Panel →

Leave a Reply