jquery - 上下滑动面板

Question

我有以下Fiddle Example :

<div class="panel" id="map">
  <a href="#" class="close">Close</a>
  <img src="http://placehold.it/880x120"/>    
</div>
<div class="panel" id="text">
  <a href="#" class="close">Close</a>
  Lorem ipsum dolor sit amet
</div>
<div class="content">
  <a href="#map" id="open-map" class="trigger">Open Map</a><br>
  <a href="#text" id="open-map" class="trigger">Open Text</a>
  <p>
    Integer mattis felis in felis eleifend ...       
  </p>
</div>

#map {border: solid 1px red;}

#text {border: solid 1px blue;}

img {display: block;}

div.panel {
  position: relative;
  overflow: hidden;
  display: none;    
}

div.panel a {
  background-color: yellow;
  color: @red;
  display: inline-block;
}

我需要以下内容:

1. 单击触发器时，向下/向上滑动以与其 href 中相同的 id 切换面板。

2. 单击面板内的“关闭”按钮时，向上滑动该面板。

我能够使用以下方法解决它:

$('#open-map').click(function(){
    var $helper = $('#map');
    $helper.animate({
        height: "toggle"
    }, {
        duration: 200,
        progress: function(){
           $helper.scrollTop( $helper[0].scrollHeight );       
        }
    });
});

1. 我不知道如何使用 Trigger 类以及如何使 Close 工作。

2. 我也不确定 animate 是否是最佳选择。

Answer 1

<强> WORKING FIDDLE

$('#open-map').click(function(){
    $('#map').slideToggle('slow');
});
$('#open-text').click(function(){
    $('#text').slideToggle('slow');
});
$('.close').click(function(){
    $(this).parent().slideUp('slow');
});

适用于 map 和文本。