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?
Horizontal red line grows out from center.
---
Red line finishes growing:
Content slides in from underneath red line. COntent does NOT show above red line:
c. content, content, content
d. content, content, content
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.