CODEWITHSUNDEEP
javascript
user3192937
user3192937

Reputation: 35

how to Change height of different Divs

i need increase height #post1 and decrease height of post2 and post3, when I click #slice1. when i click #slice2 , post1 must be decrease and post2 must be increase, and when i click slide3, post3 must be increase and post2 must be decrease.

Slice1,2,3 is another div, which is outside of #post1,2,3 .

 $("#slice1").toggle(function(){
     $('#post1').animate({height:650},1000);
 },function(){
     $('#post1').animate({height:230},1000);
 },function(){
     $('#post2, #post3').animate({height:230},1000);
 });

Upvotes: 0

Views: 49

Answers (2)

alexloehr
alexloehr

Reputation: 1831

I think you are looking for something like this:

$("#slice1").click(function(){
     $('#post1').animate({height:650},1000);
      $('#post1').animate({height:230},1000);
      $('#post2, #post3').animate({height:230},1000);
 });

UPDATE:

Ok now I think I know what you are looking for. Take a look at this

http://jsfiddle.net/mV353/

Upvotes: 1

Simone
Simone

Reputation: 21272

Instead of animating the height directly, you may want to toggle classes:

$("#slice1").click(function(){
     $('#post1').toggleClass('open650');
     $('#post2, #post3').toggleClass('open230');
});

Where the CSS classes are:

.open650 { height: 650px; }
.open230 { height: 230px; }

Upvotes: 0

Related Questions