How do I change a div from popup to slide down?

Question

I'm not very good with javascript and I have this javascript code. When I click on the link the div shows and hides. The problem is the showing effect, it pops up and doesn't look good so I want the div to slide down when it shows. Here's the code:

<script type="text/javascript">
var s;
ShowHideWidget = {

    settings : {
       clickHere : document.getElementById('clickHere'),
       dropdown_signup : document.getElementById('dropdown_signup')
    },

    init : function() {
        //kick things off
        s = this.settings;
        this.bindUIActions();
    },

    bindUIActions : function() {
        //Attach handler to the onclick
        /*
        s.clickHere.onclick = function() {
            ShowHideWidget.toggleVisibility(s.showing);
            return false;
        };
        */
        ShowHideWidget.addEvent(s.clickHere, 'click', function() {    
            ShowHideWidget.toggleVisibility(s.dropdown_signup);
        });
    },

    addEvent : function(element, evnt, funct) {
        //addEventListener is not supported in <= IE8
        if (element.attachEvent) {
            return element.attachEvent('on'+evnt, funct);
        } else {
          return element.addEventListener(evnt, funct, false);
        }
    },

    toggleVisibility : function(id) {
        if(id.style.display == 'block') {
          id.style.display = 'none';
        } else {
          id.style.display = 'block';
       };
    }

};

(function() {
    ShowHideWidget.init();
})();
</script>

Answer 1

You can achieve it by using jquery slideDown and slideUp functions:

Add following code:

toggleVisibility : function(id) {
    if( $(id).is(':visible') ){
       $(id).slideUp();
    } else {
       $(id).slideDown();
    }  
}

DEMO

Answer 2

You'd do well to use something like jQuery's .slideDown function. You'll have to write a lot of code to do this yourself.