how to hide an element based on the height of another element

July 15, 2022

i have a div and a show more button for it and i want to hide the show more button if the things in the div don’t exceed the max height of the div (530px) because i won’t need the button unless things in the div exceed it’s max height.

my code

var clientHeight = document.getElementById('ccontainer').clientHeight;
if clientHeight => '530px' var x = 1 else var x = 0
if x = 1 { div.classList.add('show');}

Html

<div class="ccontainer" id="ccontainer">
  <p id="context"> content </p>
  <div class="img" id="cntimgcon" >
    <img src="images\image2.jpg" id="cntimgp1">
  </div>
  <p id="context"> content </p>
</div>
<Button class="showmore"> show more </button>

>Solution :

const btn = document.querySelector('.showmore');
const height = document.querySelector('#ccontainer').clientHeight;

if (height <= 530) {
  btn.style.display = 'none'; // hide
} else {
  btn.style.display = ''; // unhide
}