-1

I am trying to set a height of an element back to its original state but the element is hidden by default (display:none) and is only activated by an on click event.

How do I go about getting the height of the element without actually clicking on the element first?

Right now I'm using this code but it's defining the height as 0 of course, because the element hasn't been displayed yet.

var initHeightInner = $('#div').find('.list').height();
Ayla
  • 114
  • 1
  • 5
  • 17

2 Answers2

0

You may set link's opacity to 0 and/or visibility:hidden. Then you'll be able to get it's actual height. Here is example bellow to show you the difference

console.log('Hidden', document.getElementsByClassName('hidden')[0].clientHeight)
console.log('Opacity', document.getElementsByClassName('opacity')[0].clientHeight)
.hidden{
  display:none;
}
.opacity{
  opacity:0;
  position:absolute;
  left:-9999px;
  top:-9999px;
}
<a href="#" class="hidden">Hidden</a>
<a href="#" class="opacity">Zero opacity</a>
Brissy
  • 349
  • 1
  • 2
  • 10
0

it is normal because your element is initially defined with a height equal to zero. therefore, you must either remove the height: 0; property and use only visibility: hidden ... but in this case it may affect the animation of this element on click event. so you can try to add a new div (for example with the .list-body class) below your .list element and try to get the height from this element. like : var initHeightInner = $('#div').find('.list-body').height()

Mahmoud
  • 868
  • 11
  • 27