向上和向下動畫div

Question

我只是製作一個面板，（div）具有cookie，並且可以打開或關閉。 我想雖然動畫的div打開或關閉點擊。

我到目前爲止的代碼是：

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

    document.getElementById('setup').onclick=function() { 
     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(); 

任何幫助表示讚賞

Answer 1

我不確定，如果我理解你的問題的權利。但是，根據我所理解的，我已經把小提琴放在了一起，以達到你想要的。看一看。

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

編輯：

更新小提琴解決意見中提到的情況下

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

Answer 2

你試過JQuery toogle+slide？

Answer 3

我假設你正在使用jQuery，因爲你已經標記它。

嘗試： //在DOM準備

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() { 
     ... 
    } 
});