使用slideUp在jquery中显示div

Question

我写这段代码。 但是我想点击我的图片时，div从下往上打开。这段代码反之亦然。 但我不知道。

$(document).ready(function() {
  $("img").click(function(event) {
    event.stopPropagation();
    $(".button").slideToggle('slow');
  });

  $(document).click(function() {
    $(".button").slideUp("slow");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container resolution-list text-center">
  <div class="resolution">
    <a href="#"><img src="img/c2.png" id="img"></a>
  </div>
  <div class="button text-center">
    <ul class="text-center">
      <li><button class="btn0" type="button">240</button></li>
      <li><button class="btn0" type="button">450</button></li>
      <li><button class="btn0" type="button">700</button></li>
      <li><button class="btn0" type="button">1024</button></li>
    </ul>
  </div>
</div>