Animate a div down and up using Jquery on click

Question

Need help in animating a div up on click and down via the same click link. Here is my Javascript below:

 $(function() {

        // global functions
        var dash = $('#Dashboard');
        var dashBtn = $('#dashClick');
        var state = dash.css({
            "top":600
        });


        var clicked = dashBtn.click(function(e) {
          e.preventDefault();

          if(clicked) {
            dash.animate({"top":0});
          } 

          if(state > 0 && clicked) {
            dash.animate({"top":600});
          }
        });

        //make it height of document
        dash.height($(document).height()); 
    });

and my HtML below showing the references to the javascript with the ID's:

<a id="dashClick" href="#">Dashboard</a>
<div id="Dashboard"> 
          <h2 class="dashTitle">Project Information</h2>
          <div class="dashInnerAdd">
            <p>
       Project name: CSS3 Effects N' Stuff 
       My github is: https://github.com/Amechi101/css3effects
            </p> 
          </div> 
        </div>
      </main>  <!-- end grid main-->
    </div> 

   <!--end wrap -->

Answer 1

Among other things (see the code for all changes):

If you want to use top, you probably are wanting it to behave like it does with absolute positioning. To do that, you need a container with relative positioning around the #Dashboard. Also, your javascript animate needs px values. "top":600 should really be top:"600px".

html:

<a id="dashClick" href="#">Dashboard</a>
<div class="container">
    <div id="Dashboard"> 
          <h2 class="dashTitle">Project Information</h2>
          <div class="dashInnerAdd">
            <p>
       Project name: CSS3 Effects N' Stuff 
       My github is: https://github.com/Amechi101/css3effects
            </p> 
          </div> 
    </div> 
</div>

js:

$(function() {

    // global functions
    var dash = $('#Dashboard');
    var dashBtn = $('#dashClick');
    var clicked = false;

    dashBtn.click(function(e) {
      e.preventDefault();

      if(clicked === true) {
        clicked = false;
        dash.animate({top:"0px"});
      } else {
        clicked = true;
        dash.animate({top:"600px"});
      }
    });

    //make it height of document
    dash.height($(document).height()); 
});

and some css:

.container {
    position: relative;
}
#Dashboard {
    position: absolute;
    top: 0;
}

fiddle: http://jsfiddle.net/SQK78/2/

If you don't need the absolute positioning, you can just change top to marginTop, and you can get rid of the container wrapper as well as all of the css in that fiddle.

Answer 2

Your main javascript only executes once. You need to track state from within the click handler. Try this:

$(function() {

    // global functions
    var dash = $('#Dashboard');
    var dashBtn = $('#dashClick');
    var state = true;


    dashBtn.click(function(e) {
      state = !state;
      e.preventDefault();

      if(state) {
        dash.animate({"top":20});
      } 

      if(!state) {
        dash.animate({"top":600});
      }
    });

    //make it height of document
    dash.height($(document).height()); 
});