jquery - Can't Open A Div On Click — Trying to Change it's height from 0 to it's actual size -

i’m trying open div css transition hidden it’s actual size, using height.

on click, it's supposed open it’s full height.

initially set element's height 0 — in order hide it.

.full-bio {          width: 100%;          transition: 0.4s ease;          color: white;          overflow: hidden;          height: 0;      }

then in jquery copy element, find size, copy size, delete copied element , if height equals 0, change height height saved.

    var $textblock = this.$fullbio;        var $measuringcopy = $textblock.clone();        console.log($textblock);        console.log($measuringcopy);        $measuringcopy.css({      'opacity': 0.5,      'backgroundcolor' : 'yellow',      'height': 'auto',      'position': 'absolute',      'width': '100%',      'top' : -1000,      'left' : -1000      });              $textblock.append($measuringcopy);        var finalheight = $measuringcopy.height();              $measuringcopy.remove();        if ($textblock.height() === 0) {       $textblock.css('height', finalheight);      } else {       $textblock.css('height', 0);      }

here's fiddle working in different setup — https://jsfiddle.net/hogue/tyc0ju9m/8/

ultimately, code i'm trying make work refuses change elements height on click — cancel out old height of 0 (in initial stylehsheet) however, adds new height of 0px instead of actual height , doesn't change.

not sure i'm doing wrong — see obvious?

what try that:

$(document).ready(function(){    $(".hide-bio").hide();    $(".click-me").on('click', function() {       if ($(".hide-bio").is(":not(:visible)")) {        $(".hide-bio").slidedown(400);      } else {        $(".hide-bio").slideup(400);      }    });  });

.hide-bio {    width: 100%;    transition: 0.4s ease;    color: white;    background-color: gray;  }    /* .show-bio {       // max-height: 100px;    height: 300px;  } */    p {        background-color: green;  }       /*  .hide-bio {        overflow: hidden;    min-width: 100%;    transition: transform 0.3s linear 0s, visibility 0.1s linear 0s;    transform: translatey(-5%);    visibility: hidden;    color: white;   }      .show-bio {        background-color: gray;    transform: translatey(0%);    transition: transform 0.3s linear 0s;    visibility: visible;   } */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="">      <button class="click-me">      click me    </button>      <div id="" class="full-bio hide-bio">      lorem ipsum dolor sit amet, consectetur adipiscing elit. donec elementum sapien vel rhoncus condimentum. maecenas id scelerisque turpis. suspendisse potenti. quisque laoreet risus lorem, ut euismod nulla imperdiet scelerisque. nunc nec orci sit amet metus      sodales accumsan. morbi commodo pharetra gravida. donec porta bibendum lorem, egestas metus congue in. donec lobortis libero odio, scelerisque luctus urna auctor et. donec ultricies velit vel euismod ultrices. phasellus et elementum nulla. phasellus      feugiat enim tellus, sed cursus velit varius ut. pellentesque viverra ultricies nibh, ac pretium lectus gravida quis. proin ultrices nunc nisl lacinia, id gravida sapien cursus. nam nec interdum orci. nulla in vehicula nunc.    </div>  </div>