Ciao a tutti,

sto creando un sito e ho un problema con un pannello-menù.Mi spiego: Il pannello è un div di 350px in larghezza e 220px in lunghezza. E' attaccato al margine sinistro della pagina,quindi con un margin-left
di 0px.Il punto è che questo pannello deve essere nascosto e mostrato attraverso il click di un bottone.Cioè, sono riuscito a farlo nascondere al caricamento di paggina, e poi attraverso il click del bottone riesco anche a farlo mostrare,quindi ad "espanderlo",ma il problema è che una volta cliccato e mostrato tutto, se clicco di nuovo dovrebbe nascondersi di nuovo,con slide a sinistra, ma non lo fa.Ho trovato anche il problema: il fatto che sia un margin-left: 0px. Ho notato infatti che basterebbe che sia di 1px spostato da sinistra e funzionerebbe tutto,nascondere/mostrare, ma se è di 0px non funziona.Qualcuno saprebbe aiutarmi ?

Ecco anche il codice :

codice HTML:
 <div class="collapsible">
           <span class="categories"> Categories </span>
           <span class="underline-categories"></span>
           <a href="#" class="cat-title"> Recursive or Iteration Algorithm </a>
           <a href="#" class="cat-title" id="snd-cat-title"> Logical Algorithm </a>
           <a href="#" class="cat-title" id="trd-cat-title"> Serial, Parallel or Distributed </a>
           <a href="#" class="cat-title" id="frt-cat-title"> Deterministic or Non-Deterministic </a>
           <a href="#" class="cat-title" id="fft-cat-title"> Exact or Approssimate Algorithm </a>
           <a href="#" class="cat-title" id="sxt-cat-title"> Quantum Algorithm </a>
           <button class="arrow">&raquo;</button>
     </div>
codice:
 
 .collapsible {
    width: 350px;
    height: 220px;   
    background: url(callout.png) #1A4065;
    position: fixed;
    margin-left: 0px;
    margin-top: 200px;
    z-index: 1000;
    border-radius: 0 12px 12px 0;
}

.categories {
    position: absolute;
    color: #fff;
    font-family: 'Jura', sans-serif;
    font-size: 1.4em;
    letter-spacing: 1px;
    margin-left: 15px;
    margin-top: 10px;   
}

.underline-categories {
    position: absolute;
    width: 120px;
    height: 1px;
    border-radius: 15px;
    background-color: #fff;
    margin-top: 37px;
    margin-left: 17.3px;
}

.cat-title {
    position: absolute;
    color: #fff;
    text-decoration: none;
    font-family: 'Ubuntu', sans-serif;
    font-size: 1em;
    margin-top: 50px;
    margin-left: 20px;
    letter-spacing: 0.8px;
    display: table;
}

#snd-cat-title {
    margin-left: 20px;
    margin-top: 75px;
}

#trd-cat-title {
    margin-left: 20px;
    margin-top: 100px;
}

#frt-cat-title {
    margin-left: 20px;
    margin-top: 125px;
}

#fft-cat-title {
    margin-left: 20px;
    margin-top: 150px;
}

#sxt-cat-title {
    margin-left: 20px;
    margin-top: 175px;
}

.arrow {
    position: absolute;
    margin-top: 15px;
    margin-left: 310px;
    width: 31px;
    height: 18px;
    cursor: pointer;
}
Javascript/Jquery

codice:
$(document).ready(function() {
    var hideWidth = '-305px';
    var collapsibleEl = $('.collapsible'); 
    var buttonEl =  $(".collapsible button");

    collapsibleEl.css({'margin-left': hideWidth});

    $(buttonEl).click(function()
    {
        var curwidth = $(this).parent().offset(); 
        if(curwidth.left>0)
        {
           
            $(this).parent().animate({marginLeft: hideWidth}, 300 );
            $(this).html('&raquo;'); 
        }
else{
          
            $(this).parent().animate({marginLeft: "0"}, 300 );    
            $(this).html('&laquo;');
        }
    });
});