animer div de haut en bas

Question

Je ne fais qu'un panneau, (div) qui a un cookie, et qui peut être ouvert ou fermé. Je voudrais cependant animer la div ouverte ou fermée sur clic.

Le code que j'ai à ce jour est:

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(); 

Toute aide appréciée

Answer 1

Je ne suis pas sûr, si j'ai bien compris votre question. Mais, d'après ce que j'ai compris, j'ai monté un violon pour réaliser ce que tu veux. Regarde.

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

Edit:

Mise à jour du violon pour résoudre le scénario mentionné dans les commentaires

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

Answer 2

Avez-vous essayé JQuery toogle+slide?

Answer 3

Je suppose que vous utilisez jQuery parce que vous avez balisé il.

Essayer: // le dom prêt

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