None None - 3 months ago 7
jQuery Question

How to get height of div before its expanded

So I'm using bootstrap collapse, and when the user clicks on a link I want to expand the div and calculate its height and add that height to h3.
My problem is that I get 0 when I click on link and expand div, and when I click again it collapses in div then it get its true height. Any help?

$(document).ready(function(){
$("#open_tech").click(function(){
var height = $(".price_list").height();
$('.left_side_menu h3').css('height',height);
console.log(height);
})
});

Answer

What you want is the shown.bs.collapse event

This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).

$('.price_list').on('shown.bs.collapse', function () {
    var height = $(".price_list").height();
    $('.left_side_menu h3').css('height', height);
    console.log(height);
})
.left_side_menu h3 {
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button data-toggle="collapse" data-target=".price_list">Collapsible</button>

<div class="collapse price_list">
  Lorem ipsum dolor text.... Lorem ipsum dolor text....
  <br>
  <br>
</div>

<br>
<div class="left_side_menu">
  <h3>Some header text</h3>
</div>