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

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  id="ccontainer">
  <p id="context"> content </p>
  <div  id="cntimgcon" >
    <img src="images\image2.jpg" id="cntimgp1">
  </div>
  <p id="context"> content </p>
</div>
<Button > show more </button>

CodePudding user response：

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

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