Solved

JQuery: How toggle animation using If statements?

Posted on 2008-10-30
4
1,115 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

632 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