i want to hide the showmore button if the height of the div(ccontainer) is less than 550px-CodePudding

i want to hide the showmore button if the height of the div(ccontainer) is less than 550px and i will have more than one div and for each i will have a showmore button, and i already have a code that works (hides the btn) but it doesn't work for more than one button like if there are two divs it will hide the button of the first div but it just ignores the second one maybe that is because the code is implemented from top to bottom, so to sum it up what i want to do is that if div's height is less than 550px the show more button should be hidden and the code should also hide the second button for the second div.

and sorry for my broken English

code

// showmore btn show/hide
const btn = document.querySelector('.showmore');
const height = document.querySelector('#ccontainer').clientHeight;
btn.forEach(function(){
if (height <= 530) {btn.style.display = 'none';} else {btn.style.display = '';}
)}

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：

The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document. You need to use class and not id.

CodePudding user response：

Your question is not fully understandable.But I think you are asking that if the first ccontainer div height is less than 550px,all the showmore button should be hide.Your styling of the button looks not good to me,but I didnt change it since this is a jquery question. Inorder to test this code I duplicate same html code you have provided. And added image url for display the image since you didnt provide image resource.And I added window.onload function in order to execute your targeted function after the page loads working sanbox

I need to mention that you used const btn= document.querySelector('.showmore').But It should be change to const btn =document.querySelectorAll(".showmore");. querySelector only select the first element but querySelectorAll return you a list of node.

html code

 <div  id="ccontainer">
      <p id="context">content</p>
      <div  id="cntimgcon">
        <img
          src="https://crdms.images.consumerreports.org/c_lfill,w_470,q_auto,f_auto/prod/cars/chrome/white/2018TOC310001_1280_01"
          id="cntimgp1"
          height="25px"
          width="auto"
        />
      </div>

      <p id="context">content</p>
    </div>
    <button >show more</button>
    <div  id="ccontainer">
      <p id="context">content</p>
      <div  id="cntimgcon">
        <img
          src="https://crdms.images.consumerreports.org/c_lfill,w_470,q_auto,f_auto/prod/cars/chrome/white/2018TOC310001_1280_01"
          id="cntimgp1"
          height="25px"
          width="auto"
        />
      </div>

      <p id="context">content</p>
    </div>
    <button >show more</button>

js code

  <script>
    window.onload = function () {
      const btn = document.querySelectorAll(".showmore");
   
      const height = document.querySelector("#ccontainer").offsetHeight;
      btn.forEach(function (single) {
        if (height <= 550) {
          single.style.display = "none";
        } else {
          single.style.display = "block";
        }
      });
    };
  </script>