animate div up and down

I am just making a panel, ( div ) that has cookie, and can be opened or closed. I would like though to animate the div open or closed on click.

The code I have so far is:

var state;
window.onload=function() {
   obj=document.getElementById('closeable');
   state=(state==null)?'hide':state;
   obj.className=state;

   document.getElementById('setup').onclick=fu开发者_StackOverflow中文版nction() {
      obj.className=(obj.className=='show')?'hide':'show';
      state=obj.className;
      setCookie();

      return false;
   }
}

function setCookie() {
   exp=new Date();
   plusMonth=exp.getTime()+(31*24*60*60*1000);
   exp.setTime(plusMonth);
   document.cookie='State='+state+';expires='+exp.toGMTString();
}

function readCookie() {
   if(document.cookie) {
      state=document.cookie.split('State=')[1];
   }
}
readCookie();

Any help appreciated

---

I am not sure, if I understood your question right. But, based on what I have understood, I have put together a fiddle to achieve what you want. Have a look.

http://jsfiddle.net/mvelaga/de4FE/1

Edit:

Updating the fiddle to address the scenario mentioned in comments

http://jsfiddle.net/mvelaga/de4FE/2/

---

I'm assuming you're using jQuery because you've tagged it.

Try: // on dom ready

jQuery(function($) {
    var panel = $('#closable');
    var state = 'hide';

    $('#setup').click(function(e) {
        e.preventDefault();
        if(state == 'hide') {
            // you can use the animate() or 
            // fadeIn()/fadeOut methods, too
            // depending on desired effect
            panel.slideDown();
            $(this).text('Hide');
            state = 'show';
        } else
            panel.slideUp();
            $(this).text('Show');
            state = 'hide';
        }
        setCookie();
    })
    function setCookie() {
         ...
    }
    function readCookie() {
         ...
    }
}); 

---

Have you tried JQuery toogle+slide?