Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

jQuery toggle height between two values.

Hello, Can you please tell me a code to toggle height for a div on click. I want to toggle between height: 200px and height: 300px.

I have been trying the code below but this is only toggling height between 0 and 300px.

 $(document).ready(function(){

  $("#button").click(function(){
    $(".one").toggle(function (){
      $(this).animate({height: "200px"}, 300);
    }, function () { $(this).animate({height: "300px"}, 300);

    });
});  
});
Pavle Lucic
Pavle Lucic
10,801 Points

could you provide html and css ?

6 Answers

Pavle Lucic
Pavle Lucic
10,801 Points

Here is the solution

http://jsfiddle.net/pavlito/dhcg427y/#base

Arshdeep Singh
PLUS
Arshdeep Singh
Courses Plus Student 8,349 Points
Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

HTML

<input id="button" type="button" value="Login" />  

<div class="one"></div>

CSS

.one {
  background: coral;
  width: 500px;
  height: 200px;
  position: relative;
  top: 20px;
  left: 500px;
  border-radius: 5px;
}

#button {
  position: relative;
  left: 500px;
  width: 500px;
  height: 50px;
  background-color: darkslateblue;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-family: "Roboto";
  border: none;
  letter-spacing: 1px;
}

#button:hover {
  background-color: tomato;
  color: #000;
}

#button:active {
  background-color: green;
}
Pavle Lucic
Pavle Lucic
10,801 Points

And html :) pls

Justin Iezzi
Justin Iezzi
18,199 Points

Arshdeep, I went ahead and edited your post with the proper markdown formatting. Please refer to the Markdown Cheatsheet link seen on this page on how to do this.

Arshdeep Singh
PLUS
Arshdeep Singh
Courses Plus Student 8,349 Points
Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

not sure why it dint show up. here it.

HTML

<input id="button" type="button" value="Login" />

<div class="one"></div>

Arshdeep Singh
PLUS
Arshdeep Singh
Courses Plus Student 8,349 Points
Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

its basically, one input with id of #button and a div below it with class of .one

Arshdeep Singh
PLUS
Arshdeep Singh
Courses Plus Student 8,349 Points
Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

Thanks Justin, I did click on the link for Markdown Cheatsheet, it just came back to the post question page. I think the link is broken.

Justin Iezzi
Justin Iezzi
18,199 Points

Sure thing! I'm sorry to hear that it's not working for you. If you would like to see how I used the markdown to fix your post, you can click the ellipses "..." under your answer with the code in it, and click "Edit Answer". You should see how I got it to work once in edit mode.

Arshdeep Singh
PLUS
Arshdeep Singh
Courses Plus Student 8,349 Points
Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

This is slick, Thankyou Mr Pavle. Many Many Thanks.

I had a hunch that it would work with if else statement but had no clue how to implement it. ill Study the answer now.

Cheers.

Pavle Lucic
Pavle Lucic
10,801 Points

I am glad that i helped you.

In this situation, first need to check what are the height is. So on button click , check height. If the height is 200 then div needs to be 300, and opposite.