Solved

JQuery: How toggle animation using If statements?

Posted on 2008-10-30
4
1,102 Views
Last Modified: 2008-10-30
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
0
Comment
Question by:CSS_Guy
  • 2
  • 2
4 Comments
 
LVL 4

Accepted Solution

by:
husker475 earned 500 total points
ID: 22844302
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
 

Author Comment

by:CSS_Guy
ID: 22844501
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
 
LVL 4

Expert Comment

by:husker475
ID: 22844569
My bad, sorry.
this.addClass('down') should be $(this).addClass('down');
Same with removeClass, anyway, glad you got it working.
0
 

Author Comment

by:CSS_Guy
ID: 22844586
No worries at all. Thanks again man
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now