jquery - jquery .show("スライド") オプション

Question

これが私のコードです。左から滑り込みます。

<script>
  $('#goalHS').click(function() {
  $('div[id^="div-detailed-goal"]').show("slide"); 
  }); 
  $("#redline").click(function() {
    $('div[id^="div-detailed-goal"]').fadeOut("slow"); 
     }); 
</script>

左からフェード インするのではなく、赤い線を引いてから、DIV を上からスライド インさせます。

次のようにするにはどうすればよいですか？

1. 中央から赤い横線が伸びています。

                ---

1. 赤い線は成長を終了します:

---

1. 赤い線の下からコンテンツがスライドインします。コンテンツは赤い線の上に表示されません:

---

c. コンテンツ、コンテンツ、コンテンツ

d. コンテンツ、コンテンツ、コンテンツ

1. コンテンツがスライドインを終了します。

---

を。コンテンツ、コンテンツ、コンテンツ

b. コンテンツ、コンテンツ、コンテンツ

c. コンテンツ、コンテンツ、コンテンツ

d. コンテンツ、コンテンツ、コンテンツ

私は 4 つの異なる方法を試し、他の js プラグイン ライブラリを使用してみましたが、それを理解するほど高度ではありません。