Shohidul Alam Shohidul Alam - 7 months ago 12
Javascript Question

Set height of all divs uniformly

I have a drop-down with slide-up and slide-down animation inside a div.

When the drop down is open, the div's height is

124px
else its
20px
. I have another div, for which height should be equal to that of the first div even, when animating the height of div's drop-down.

I am using jquery 1.11.0

Here is my code:

$( ".dropdown" ).hide();
$('.title').on('click', function(){
var element = $(".dropdown");
if (element.hasClass('open')) {
element.removeClass('open');
element.slideUp();
}
else {
element.addClass('open');
element.slideDown();
}
});


here is my fiddle.

What can I do?

Edit:
I only want the height to be same for both the div's at all times.

When
div 1
height is changing the js/jQuery should set the same height to
div 2
.



$(".dropdown").hide();
$('.title').on('click', function() {
var element = $(".dropdown");
if (element.hasClass('open')) {
element.removeClass('open');
element.slideUp();
} else {
element.addClass('open');
element.slideDown();
}
});

.d1 {
border: 1px solid #333;
}
.d2 {
border: 1px solid #333;
}
.title {
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="d1">
<a class="title">title(click here)</a>
<ul class="dropdown">
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</div>
<br/>
<div class="d2">
<a>victim</a>
</div>




Answer

This is perfect for you:

var slideDown = $("#d1").height();
$( ".dropdown" ).hide();
var slideUp = $("#d1").height();
$('.title').on('click', function(){
  var element = $(".dropdown");
  if (element.hasClass('open')) {
    element.removeClass('open');

    element.slideUp(400, function(){});
    $("#d2").animate({height:  slideUp}, 500);

  }
  else {
    element.addClass('open');
    element.slideDown(400, function(){});
    $("#d2").animate({height:  slideDown}, 500);

  }
});

JSFiddle

Comments