How to make if condition of css height in JavaScript

I have a Text which when I click on it should toggle. It works if I don't have style condition on it but how can I accomplish this with style.

HTML CODE

    <section class="discription-list">
           <div class="description-title">
             <h3 class="button1">Description</h3>
             <h3 class="button2">Product Detail</h3>
             <h3 class="button3">Shipping Info</h3>
           </div>


           <div class="toggle-list"></div>
        </section>

CSS CODE

.toggle-list{
    position: relative;
    top: 0px;
    left: 10%;
    width: 80%;
    height: 0px;
    margin-bottom: 10%;
    border-bottom: 1px solid grey;
    overflow: hidden;
    transition: 0.3s;
}

JAVASCRIPT CODE

var btnt = document.querySelector('.description-title');
      btnt.addEventListener('click', toggleClick);

           function toggleClick(e) {
            var div = document.querySelector('.toggle-list');

              if (e.target === document.querySelector('.button1') && div.style.height === '0px') {
                var tag1 = '<div id="wrapper1" class="open1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ante eget lorem varius, ut lacinia leo finibus. Nam commodo luctus odio ac consectetur. Donec vel magna nec augue condimentum condimentum ut a neque. Mauris leo sem, tincidunt ac vulputate eget, ullamcorper vitae velit. Morbi a sem laoreet tellus bibendum iaculis non eu mauris. Nam ut interdum massa, ac lacinia velit. Praesent imperdiet fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ante eget lorem varius, ut lacinia leo finibus. Nam commodo luctus odio ac consectetur. Donec vel magna nec augue condimentum condimentum ut a neque. Mauris leo sem, tincidunt ac vulputate eget, ullamcorper vitae velit. Morbi a sem laoreet tellus bibendum iaculis non eu mauris. Nam ut interdum massa, ac lacinia velit. Praesent imperdiet fringilla interdum.</p></div>';
                    div.innerHTML = tag1;
                    div.style.height = '160px';
              }else if (e.target === document.querySelector('.button2') && div.style.height === '0px') {
                var tag1 = '<table><tr><td class="td">Date First Available</td><td class="td2">18 June 2018</td></tr><tr><td class="td">Item part number</td><td class="td2">SVJG972080_1</td></tr><tr><td class="td">Color</td><td class="td2">White</td></tr><tr><td class="td">Material Type</td><td class="td2">velvet upper and rubber sole</td></tr><tr><td class="td">Shoes size</td><td class="td2">38</td></tr></table>';
                    div.innerHTML = tag1;
                    div.style.height = '180px';
              }else if (e.target === document.querySelector('.button3') && div.style.height === '0px') {
                var tag1 = '<div id="wrapper3" class="open1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ante eget lorem varius, ut lacinia leo finibus. Nam commodo luctus odio ac consectetur. Donec vel magna nec augue condimentum condimentum ut a neque. Mauris leo sem, tincidunt ac vulputate eget, ullamcorper vitae velit. Morbi a sem laoreet tellus bibendum iaculis non eu mauris. Nam ut interdum massa, ac lacinia velit. Praesent imperdiet fringilla interdum. </p></div>';
                    div.innerHTML = tag1;
                    div.style.height = '140px';
              }
           }