Accordéon animer Jquery

Question

Bonjour je voudrais que #accord si il est ouvert élimine la marge de 200px, s'il est fermé insère la marge de 200px. J'ai connecté l'élimination de la marge à la fonction sur le clic h3, quand il est ouvert. Comment je fais pour insérer la marge lorsque #accordion est fermé?

page Lien temporany: http://www.davidxdesign.altervista.org/city.htm

<script> 
$(function() { 
var stop = false; 
$("#accordion h3").click(function(event){ 
if (stop) 
{ event.stopImmediatePropagation(); 
event.preventDefault(); stop = false } }); 
$("#accordion").accordion({ 
header: "> div > h3", 
collapsible: true, 
active: false, 
autoHeight: false, 
changestart: function(event, ui){ ui.newHeader.parent().prependTo(this); } }) 
.sortable({ 
axis: "y", 
handle: "h3", 
stop: function() { stop = true; } }) }); 
</script> 
<script> 
function zeromargindiv(){ 
$('#accordion').animate({ 
marginTop: '0px' }, 
2000, function() { }); } 
</script>** 


<div id="accordion" style="margin-top:180px"> 

<div class="group"> 
    <h3 onclick="zeromargindiv()">Cosa Visitare</h3> 
    <div> 
    </br> 
<a onclick="go('map/duomo.htm')">Via del Duomo</a> </br> 
<a onclick="go('map/cavour.htm')">Corso Cavour</a> </br> 
<a onclick="go('map/palcapitano.htm')">Palazzo del Capitano del Popolo</a> </br> 
<a >Palazzo Comunale</a> </br> 
<a >Vicolo degli Artisti</a> </br> 
<a href="http://www.baduel.it" target="_blank" >Libreria antiquaria Baduel</a> </br> 
<a href="http://www.bibliotecaorvieto.it/easyne2/LYT.aspx?IDLYT=8892&ST=SQL&SQL=ID_Documento=30&CODE=FUMI" target="_blank" >Biblioteca Fiumi</a> </br></br> 

</div> 
    </div> 
etc... 

Answer 1

Essayez ceci: - http://jsfiddle.net/adiioo7/HpeM4/2/

JS: -

$(function() { 
    var stop = false; 
    $("#accordion h3").click(function (event) { 
     if (stop) { 
      event.stopImmediatePropagation(); 
      event.preventDefault(); 
      stop = false; 

     } 
    }); 
    $("#accordion").accordion({ 
     header: "> div > h3", 
     collapsible: true, 
     active: false, 
     autoHeight: false, 
     changestart: function (event, ui) { 
      ui.newHeader.parent().prependTo(this); 
     }, 
     activate: function (event, ui) { 
      if ($("#accordion").accordion("option", "active") === false) { 

       $('#accordion').animate({ 
        marginTop: '180px' 
       }, 
       2000, function() {}); 
      } 
     } 

    }) 
     .sortable({ 
     axis: "y", 
     handle: "h3", 
     stop: function() { 
      stop = true; 
     } 
    }) 
}); 

function zeromargindiv() { 
    if ($("#accordion").accordion("option", "active") === false) { 

     $('#accordion').animate({ 
      marginTop: '0px' 
     }, 
     2000, function() {}); 
    } 
}