JQuery: How toggle animation using If statements?

Hi Experts,

I have a button at the top of my page, that when clicked, changes the height of a div from 40px to 300px and animates with Jquery. Id like to add some more functionality to this button, and I think it will require some if/else statements. (Please refer to the link in the post - and dont mind the ugliness right now ;) )

Logically, (i think) I understand what it needs to do, but I'm not familiar enough with Jquery to achieve it. I'd basically like the link to function like this:

If #info_guide's height = 40px then animate and change height to 300px...
ELSE
If #info_guide's height = is 300px then animate and change height back to 40px...

Also, everytime the link is clicked, add/remove a class name of ".down" to it

I REALLY appreciate your help.


http://www.0to5.com/_dev/index.html
CSS_GuyAsked:
Who is Participating?
 
husker475Connect With a Mentor Commented:
Try this:

$(document).ready(function(){
  $("#button_id").click(function(){
    if($("#info_guide").css('height') == '40px'){
      $("#info_guide").animate({
        height: '300px'
      } , 1500);
    }
    else{
      $("#info_guide").animate({
        height: '40px'
      }, 1500);
    }
    
    //Move into the if/else-blocks if you want to.
    this.addClass("down");
    this.removeClass("down");
 
  });
});

Open in new window

0
 
CSS_GuyAuthor Commented:
This is just what I was looking for - I really appreciate your help. I had to change the class code a bit. I might have been putting your code in the wrong place, but either way - I'm all good to go. Everthing is fully functional. Thanks again.
<script>
$(document).ready(function(){
  $("#go").click(function(){
    if($("#info_panel").css('height') == '40px'){
      $("#info_panel").animate({
        height: '300px'
      } , 450);$("#go").addClass("down");
    }
    else{
      $("#info_panel").animate({
        height: '40px'
      }, 450);$("#go").removeClass("down");
    }
 
  });
});
  </script>

Open in new window

0
 
husker475Commented:
My bad, sorry.
this.addClass('down') should be $(this).addClass('down');
Same with removeClass, anyway, glad you got it working.
0
 
CSS_GuyAuthor Commented:
No worries at all. Thanks again man
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.