jQuery TutorialsLearn about slideToggle Function in jQuery

Learn about slideToggle Function in jQuery

jquery-slide-2-740X296

In this tutorial we’re going to look at the slideToggle functionality and animation trigger events, as well as animation stringing.
The slideToggle function works the same as toggle on its on, but with an added slide effect – it slides instead of just showing or hiding the selected element.
For our example, we’ll start by creating a button which we would later apply to trigger the toggle animation of an image. Like so:

<div><input id="trigger" type="button" value="Toggle Image"/></div>
<div><img id="element" alt="parakeet" src="parakeet.jpg"</div>

We’re going to listen for an event when this button is clicked and toggle the image accordingly. For this purpose, lets create an event handler for this button and bind it to the “click” JavaScript event.

<script type="text/javascript">
$(document).ready(function(){
		$('#trigger').click(function(){
		$('#element').slideToggle();
                });
});	
</script>

Now, when we click the button, this event toggles the image. However, the image slides from and into the corner, instead of up and down. That is because we applied the toggle directly on an image element (some elements don’t display properly when you apply animations on them). In order to achieve the functionality that we want, we need to bind the function to a different element that contains our image. For this purpose, we will use our div container for the image element and give it an id of “imgC”.

<div><input id="trigger" type="button" value="Toggle image"/></div>
<div id="imgC"><img id="element" alt="parakeet" src="parakeet.jpg"</div>
<script type="text/javascript">
$(document).ready(function(){
		$('#trigger').click(function(){
		$('#imgC').slideToggle();
                       });
});
</script>

Lets also hide the image with CSS so that our first slide animation will be downwards:

#imgC{
display:none;	
padding:auto;	
}

Now, when we click the button, we can clearly see the image sliding up and down.
Back to our slideToggle() function, you can pass parameters to it just like with slideDown() such as the speed of the animation(either worded or numbered in milliseconds), the type of the animation(the default being ‘swing’) and a custom callback function. The general structure would be .slideToggle( duration , easing , complete  )

Where “complete” is the callback function which triggers once the animation is complete, called once per matched element.

Learn Javascript And JQuery From Scratch

For more information, please refer to the jQuery documentation at http://api.jquery.com/slidetoggle/

It is important to note that in this case, the default callback function fires on both the slide up and slide down animations, of which slideToggle() consists. If we want a callback function that runs only once, the element has completely slid upwards (and not downwards), we have to trigger it only in the condition that our element is in a hidden state. To exemplify this, lets add a callback function that animates the size of our button only once the image has slid upwards. In addition, we’ll give our animation a speed of 2 seconds and a style of linear. Like so:

<script type="text/javascript">
$(document).ready(function(){
		$('#trigger').click(function(){
				var $button = $(this);
				$('#imgC').slideToggle(2000,"linear",function(){
						 if($(this).is(":hidden")) {
						 $button.animate({
                                                                              'width' : $button.width()*2,
                                                                              }, 'slow');
						 
						 }
                                });
                });
});
	
</script>

The first $(this) refers to the button element, while the second refers to the image containing div element.

Note we have here 3 functions. Once the user clicks the button it starts the toggle, then only if the image is hidden (after the slide up functionality of the toggle has completed) we run a function that doubles the width of the button. Therefore, we have created an effect where the width of the button doubles each time the image slides upward.

You will get the following output by clicking the “Toggle button

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -