手风琴动画Jquery

Question

Hello I would want that #accordion if it is opened eliminates the margin of 200px, if it is closed inserts the margin of 200px. I have connected elimination of the margin to the function on click h3, when it is opened. How I make to insert the margin when #accordion is closed?

Link temporany page: 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

Try this out:- 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 () {});
    }
}