javascript - Reset position after .animate() method -

javascript - Reset position after .animate() method -

i'm trying combine .toggle() method animation. i've followed methods laid out in this fiddle in this post, sec click isn't returning div original position.

the behavior should be:

click title content expands slide on headline click again content contracts slide downwards original position <-- isn't happening

html

<div id="headline"> <h1>this headline</h1> </div> <div id="page-wrap"> <!-- contains more 1 article, need whole thing slide --> <article class="post"> <div class="title"><h1>feedback</h1></div> <div class="content"> <p>videos can more direct instruction. currently, how give feedback on assignments?</p> <p>it takes lot of time, right?</p> <p>video can used give direct feedback pupil because communicates areas of improvement more written feedback alone.</p> </div> </article> </div>

css

#headline { position:fixed; top:10px; left:10px; width:380px; } #page-wrap { position:relative; top:200px; } .post { width:300px; } .post .title { cursor: pointer; } .post .content { display:none; }

script

$(".title").click(function() { $title = $(this); $content = $title.next(); $content.toggle( function() { $("#page-wrap").animate({"margin-top":"200px"}, 'fast') }, function () { $("#page-wrap").animate({"margin-top":"-200px"}, 'fast') } ) }); codepen demo here's live page more context.

javascript jquery css