Toggle() Effect Down, Jquery

Question

Is there any way to change the direction of Jquery’s toggle() effect? For example, I made a button that when clicking, it shows and closes a div

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

Only, that 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 it appears below. Is there a way to do this with toggle()? Or is there something you can do?

Answer 1

I believe you’re looking for .slideToggle() instead of .toggle(), the standard behavior of .slideToggle() in jquery is "slideup" or "slideDown", ie slide p/ up and p/ down. If you want the div go/ right or left, you can use the "slide" effect available in jquery.

Jquery Slide

Follow an example from .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'>

Answer 2

I believe that toggle alone has no way of changing the direction from the bottom up and vice versa. You can use: . slideToggle() or slideDown()/slideup()

(=