How to hide or show button below div according to data more or less

Question

If I run the code without the 'if' condition, the toggle button works very well, but I want the toggle button to hide if I have less data and/or appear if there is more data. I also want a minimum content div height of 100px. Please help me. Thanks.

 var elmnt = document.querySelector(".backwhite"); var txt = elmnt.clientHeight + "px"; if (txt >= 100 + "px") { var mydivh = document.querySelector(".backwhite"); mydivh.style.height = "100px"; function toggleDescriptionHeight(e) { document.querySelector(".backwhite").classList.toggle('expanded'); e.target.textContent == 'Expand' ? e.target.textContent = 'Collapse' : e.target.textContent = 'Expand'; } var button = document.querySelector('.btn'); button.addEventListener('click', toggleDescriptionHeight) } else { var myElements = document.querySelector(".bbttnn"); myElements.style.display = "none"; var myElement = document.querySelector(".backwhite"); myElement.style.height = "100px"; } 

 body { background-color: #f1f3f6; } .backwhite { background-color: #fff; padding: 15px; overflow: hidden; } .backwhite.expanded { height: auto; } 

 <div class="container"> <h4>Description</h4> <div class="backwhite"> <p>1. Create Ui For Email Campaign.</p> <p>2. Create Functionality of Email Campaign</p> <p>3. Create Keyword Display using Drag And Drop Functionality.</p> <p>1. Create Ui For Email Campaign.</p> <p>2. Create Functionality of Email Campaign</p> <p>3. Create Keyword Display using Drag And Drop Functionality.</p> <p>1. Create Ui For Email Campaign.</p> <p>2. Create Functionality of Email Campaign</p> <p>3. Create Keyword Display using Drag And Drop Functionality.</p>--> </div> <button type="button" class="btn btn-default btn-block">Expand</button> </div> 

Answer 1

There were several redefinitions of the same variables, the CSS has been modified to handle all height definitions, and the if statement tidied to remove the 'px' (which interferes with the maths of the comparator).

Note that if the minimum height (which is also best defined in the CSS) is set to 100px then the JS code won't be able to hide the button. So there is an addition count of child divs to allow the button to hide if less than 3.

The code has been generally rearranged and annotated in the snippet below.

 var elmnt = document.querySelector(".backwhite"), txt = elmnt.clientHeight, button = document.querySelector('.btn'); // elmnt only needs to be defined once function toggleDescriptionHeight(e) { elmnt.classList.toggle('expanded'); if (e.target.textContent === 'Expand') { e.target.textContent = 'Collapse'; } else { e.target.textContent = 'Expand'; } } // this function has been moved out of the if condition if (txt >= 100 && elmnt.children.length > 3) { // the 'txt >= 100 &&' can go button.addEventListener('click', toggleDescriptionHeight); } else { button.style.display = "none"; } 

 body { background-color: #f1f3f6; } .backwhite { background-color: #fff; padding: 15px; height: 100px; /* height defined here */ /* min-height: 100px; */ overflow: hidden; } /* note that if the minimum height is 100 you will always have the button */ .expanded { /* this should come after .backwhite */ height: auto; } 

 <div class="container"> <h4>Description</h4> <div class="backwhite"> <p>1. Create Ui For Email Campaign.</p> <p>2. Create Functionality of Email Campaign</p> <p>3. Create Keyword Display using Drag And Drop Functionality.</p> <p>1. Create Ui For Email Campaign.</p> <p>2. Create Functionality of Email Campaign</p> <p>3. Create Keyword Display using Drag And Drop Functionality.</p> <p>1. Create Ui For Email Campaign.</p> <p>2. Create Functionality of Email Campaign</p> <p>3. Create Keyword Display using Drag And Drop Functionality.</p> </div> <button type="button" class="btn btn-default btn-block">Expand</button> </div>