Here's my code. It slides in from the left.

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

Instead of fading in from the left, I want a red line to be drawn and then have the DIV slide in from the top.

How can I get it to do the following?

1. Horizontal red line grows out from center.

                ---

1. Red line finishes growing:

1. Content slides in from underneath red line. COntent does NOT show above red line:

---

c. content, content, content

d. content, content, content

1. Content finishes sliding in. Awesomeness ensues!

---

a. content, content, content

b. content, content, content

c. content, content, content

d. content, content, content

I've tried 4 different ways, and I've tried using other js plugin libraries, but I'm not quite that advanced to figure it out.