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

Issue

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

js

// 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 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

Your question is not fully understandable.But I think you are asking that hide the top most showmore button and display other showmore button when the upper ccontainer is less than 500px.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 class="ccontainer" id="ccontainer">
      <p id="context">content</p>
      <div class="img" 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 class="showmore">show more</button>
    <div class="ccontainer" id="ccontainer">
      <p id="context">content</p>
      <div class="img" 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 class="showmore">show more</button>

js code

  <script>
    window.onload = function () {
      const btn = document.querySelectorAll(".showmore");

      const height = document.querySelector("#ccontainer").offsetHeight;
      btn.forEach(function (single, index) {
        if (height <= 500 && index == 0) {
          single.style.display = "none";
        } else {
          single.style.display = "block";
        }
      });
    };
  </script>

Answered By - Lakruwan Pathirage