Forums

first of all use the current version of the library:
http://yuilibrary.com/yui/docs/anim/reverse.html
your link is for an outdated version of the YUI site (the method: 'query' is no longer there)

then swap the settings for 'to' and 'from', you'll see that when the animation starts, the div shrinks immediately to 0 and starts the animation from there. It is the opposite of your setting because the setting is reverted at each click, even the first one.
next you need to make the page load with the DIV already in a "shrinked" state.

Put a style of

on the page and you're set.

well, the site at yuilibrary.com has extensive documentation and plenty of examples, however the library is vast and versatile so it is difficult to know exactly where to start from.

I would advise you to use some hours to read all the articles under "core" and "infrastructure" (attribute, base, eventTarget, plugin and widget, I would leave model, app and view for later) , so you have an idea of what are the basic concepts in play, this will help you to better understand what the examples are all about when you try things out in practice,

then try out some examples relevant to what you want to accomplish and use those to go back and reread the basic documentation so to be able to enhance/understand things.

Maybe try building a plugin, there is a plugin template file, ready to be used under the plugin section http://yuilibrary.com/yui/docs/plugin/ or try out a component following the component extension file: http://yuilibrary.com/yui/docs/base/. Choose what to do depending on what you want to accomplish, to be able to choose you need to read about components, extensions, plugins and so on under the "infrastructure" section.

I hope this can be a starting point.

ah, just to be precise: each article has a sidemenu on the right with links to the API docs and to related examples.