Html 单击image向上移动div，然后再次单击使用jQuery将其移回

我有一个离顶部300px的div，在div顶部有一个向上箭头图像

我希望用户点击向上箭头图像，使这个div上升300px，然后向上箭头图像变成向下箭头图像，然后当用户点击向下箭头图像时，这个div下降300px回到它的原始位置

我希望用jQuery实现这一点

使用响应，这就是我的标记现在的样子：

$（函数（）{
$（'.container img'）。单击（函数（）{
$（'.container'）.animate（{top:-276}）；
});
$（'.container img'）。单击（函数（）{
$（'.container'）.animate（{top:0}）；
});
});
.container{
边框：1px纯色灰色；
边缘顶部：300px；
高度：800px；
填充：50px；
位置：相对位置；
}
.集装箱img{
位置：绝对位置；
顶部：-22px；
宽度：25px；
高度：25px；
}

这里有一些文字

我将使用事件触发

如下所示，但有两种状态，从一种状态切换到另一种状态：

$(function() {
    $('#arrow').click(function() {
        $('#thediv').animate({top:300});
    });
});

你可以查看下面的链接。也许它能帮你找到解决办法。
链接：-

$(function()
{
  var expanded = false;
  $('#sidebar').click(function()
                      {
                          if (!expanded)
                          {
                              $(this).animate({'left' : '0px'}, {duration : 400});
                              expanded = true;
                          }
                          else
                          {
                             $(this).animate({'left' : '565px'}, {duration: 400});
                              expanded = false;
                          }
                      });
 });