Slide div from under another div

Question

I have a div which contains products that you can add by pressing the add link. And when you press the add link, an info message fades in and after 4 seconds fades out.

This message fades in and out at the top of the childbox-content div which is not visible for the user if he scrolls down in the div and clicks one of the last li.

My question is, how can I make the info div slide under the "Test" header in stead? This header is always visible to the user.

See jsFiddle

EDIT: by the way, I can't get the info div to appear in the jsFiddle after an add link is pressed. Not sure why.

Answer 1

First, your class on each link in the markup is .hprlink when you're looking for hprlink. Just remove the period. You use the period in a selector looking for a class, not when you're defining a class.

Second, try using JQuery slideUpto hide the infoDiv:

Fiddle

Answer 2

http://jsfiddle.net/e62Wu/14/

Just move the infoDiv up into the header div

<div class="header">
    <h3>
        <span class="glyphicon glyphicon-user"></span><span style="margin-left:5px;">test</span>
    </h3>
    <div id='infoDiv' class='alert alert-info alert-dismissable'>
    <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
    just an information message.............
    </div>
</div>

I had to fix all your

  <a href="#" class="hprlink">add</a>

to make your fiddle work. There shouldn't be a . before the class name