Bootstrap 3折叠：获取折叠元素的非折叠高度

Question

I have some bootstrap panels where the panel-heading is used to collapse the panel-body . I'm wondering if it's possible to access the non-collapsed height of the panel-body when it is in the collapsed state?

You can check out this jsFiddle , where the panel body is already collapsed. Clicking the panel header will expand the body. When the body is collapsed, how can I determine its height when it's not collapsed (without expanding it)?

Answer 1

This question is specific to Bootstrap 3 so this answer is as well and may not be useful generally.

In bootstrap 3, when an element is collapsed its height is explicitly set to 0px using element styling. You can disable this in-line element styling and access its height via:

$(element_selector)['height']('').height();

This will not show the element, because in addition to setting the height to 0px , when the element is collapsed its display property is set to none .

Answer 2

You can have track of how many element are inside the panel and than from there you could calculate his height:

$(document).ready(function(){
  var rowHeight = 50;
  var marginBottom = 50;
  var nrOfRows = 0;
  $('.my-table .row').each(function(){
     nrOfRows ++
  })
  var panelHeight = (rowHeight*nrOfRows)+prseInt(marginBottom)
})