Toggle() effect down, JQuery

How to change the direction of JQuery toggle () effect? For example, I made a button that when clicked, it shows and closes a Div 

    $('.botao').click(function(){
        $('.div').toggle(700);
    });

Only, it kind of has an automatic animation. From left to right >>> I wanted the effect to start from top to bottom, in case, start showing the top of the div and finish showing everything when underneath it appears. How do you do this with toggle ()? Or do you have something to do?

Author: Lucas de Carvalho, 2017-04-20
Source

2 answers

I believe you are looking for .slideToggle() instead of .toggle(), the default behavior of .slideToggle() in jquery is "slideUp" or "slideDown", i.e. sliding p/ up and P/ down. If you want div to go right or left, you can use the "slide" effect available in jquery.

Jquery Slide

Follows an example of .slideToggle() 

$('#slide-down').click(function() {
  $('img').slideDown('fast');
});

$('#slide-up').click(function() {
  $('img').slideUp(200);
});

$('#toggle-sliding').click(function() {
  $('img').slideToggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='slide-down'>Slide Down</button>
<button id='slide-up'>Slide Up</button>
<button id='toggle-sliding'>Toggle Sliding</button>
<img height="200" width="200" src='http://2.bp.blogspot.com/-ZlimLS8Z-_A/U3moCpwsWII/AAAAAAAAfkg/RGdEzSBHtSU/s1600/03.png' alt='hopper'>
 2
Author: Mathiasfc, 2017-04-20 11:42:55

I think toggle, by itself, has no way of changing the direction from bottom to top and vice versa. You can use:.slideToggle () or slideDown () / slideUp ()

(=

 1
Author: Aline, 2017-04-20 11:33:07