Koda Koda - 1 month ago 13
CSS Question

Controlling the direction of Javascript .show() / .toggle()?

I'm using Javascript's .toggle() to have this div appear/disappear:

{
display: none;
position: fixed;
top: 100px;
right: 0;
left: 0;
background: rgba(0,0,0,0.75);
padding: 15px;
}


However, over the duration of the animation it starts from the top-left corner and expands out to the bottom-right corner of the div.

Ideally, I'd like it to start from both top corners and expand downwards to both bottom corners evenly.

I thought the CSS transition-origin property might have an effect, but it doesn't seem to be the case.

Any ideas?

Thanks in advance. :)

Answer

I don't know much about jQuery's toggle method, so I looked in the docs, and sure enough it gives some helpful info. (This is a gentle hint that before coming to StackOverflow you should try solving the problem on your own, including looking at any relevant documentation online).

The .toggle() method animates the width, height, and opacity of the matched elements simultaneously.

The documentation doesn't give any info about customizing how toggle does its animation, so it looks like you're stuck. If I'm understanding you correctly, it seems like you want the element to animate only the height and not the width, so it stays the same width as it toggles and just animates the height. I don't see any way of doing that with jQuery's toggle.

BUT WAIT! It looks like jQuery has another method called slideToggle which does exactly what you want. It's just like toggle except it only animates the height and keeps the width the same. Hooray!

http://api.jquery.com/slidetoggle/

Moral of the story: if you're using a third party Javascript library like jQuery, you really need to get comfortable finding the information you need in the online documentation my friend. :)