Как получить высоту div перед ее расширением

Question

Итак, я использую обкатку начальной загрузки, и когда пользователь нажимает на ссылку, я хочу развернуть div и вычислить его высоту и добавить эту высоту в h3. Моя проблема в том, что я получаю 0, когда я нажимаю ссылку и расширяю div, и когда я нажимаю снова, она сворачивается в div, а затем получает ее истинную высоту. Любая помощь?

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

Answer 1

То, что вы хотите это shown.bs.collapse события

Это событие вызывается, когда коллапс элемент был сделан видимым для пользователя (будет ждать CSS переходов для завершения).

$('.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>