animated 'show' without jQuery

Question

I want to do a little animation on this latest website ii'm working on. Basically, I need one or two divs/paragraph show/hide based on onClick event on either radio buttons set or checkbox (then, if radio/check is value A, show div/p, if it's B then hide it)

The thing is, that this is all I would like to javascript-ify on that particular website, so jQuery looks like a little overkill (even the minified version)

Is there any simple [I can't stress this enough] way to do this either by vanilla javascript or some other minimal library [I'm generally looking for something <2kB for events and little animation (height)]

Any ideas?

Thank you!

Edit: Thanks to everyone, I just realized, that although some of the things I need to could be done via smart html+js, the rules of showing/hiding the right divs are so complicated, that it's worth of 30kB of including jQuery (even more if it's already cached from CDN), so I'll stick with jQuery. Cheers to everyone :)

edit: JS+CSS3 transition followup It works :) http://jsfiddle.net/ygZM7/23/

The only thing is: if height was previously not set (dynamic), first time you set it, the background flicks (goes from 0px height).

Answer 1

I've came up with my own quick script.. here goes nothing:

var AnimationStep = 10; //pixels
var AnimationInterval = 100; //milliseconds

window.onload = function() {
    var oDiv = document.getElementById("Div1");
    oDiv.style.display = "block";
    var height = oDiv.clientHeight;
    oDiv.style.height = "0px";
    Animate(oDiv, height);
};

function Animate(element, targetHeight) {
    var curHeight = element.clientHeight;
    if (curHeight >= targetHeight)
        return true;
    element.style.height = (curHeight + AnimationStep) + "px";
    window.setTimeout(function() {
        Animate(element, targetHeight);
    }, AnimationInterval);
    return false;
}

This will "animate" element with id Div1 and you can control the speed by playing with the two numbers on top: bigger Step means bigger chunk is displayed every time and smaller Interval means faster animation.
This code requires the following style to be applied on the element:

#Div1 { display: none; overflow: hidden; }

And of course live test case: http://jsfiddle.net/yahavbr/BbWCp/

It should be pretty simple to animate the width as well (maybe even in the same time) to achieve "cooler" effect. :)