Question

I am trying to create this dropdown box that slides down and has the bottom image retain as it slides down with content inside it. I have been trying to find scripts dedicated to this but I can’t find any. Maybe someone can give me a head start or pointer in doing this. Or does anyone have a script I can work off of?

Here is my objective: to create a slide down menu that slides down and up on click but retains this look to it.

Answer 1

Here is a simple slide down content from what you described with jQuery: http://jsfiddle.net/t9hq9/19/
you could just replace my #bottom with your bottom image, mine is just made in css with border-radius.

HTML:

<div id="content">CONTENT</div>
<div id="bottom"></div>

CSS:

#content {
width: 400px;
border-left: 10px solid #FA802F;
border-right: 10px solid #FA802F;
text-align: center;
padding: 100px 0px 100px 0px;
display: none;
}

#bottom {
width: 420px;
height: 100px;

background-color: #FA802F;
-webkit-border-bottom-left-radius: 50px;
-moz-border-bottom-left-radius: 50px;
border-bottom-left-radius: 100px;

-webkit-border-bottom-right-radius: 50px;
-moz-border-bottom-right-radius: 50px;
border-bottom-right-radius: 100px;   
}

JS:

$('#bottom').toggle(
  function() {
    $('#content').slideDown();
  },
  function() {
    $('#content').slideUp();
  }
);