Display:none not working, looks like visibility:hidden

[dzoladz]

I have a module that uses the following code.

 div id="product_content" (display:block)

     div class="item_conteiner (display:flex) => show

     div class="item_conteiner (display:flex) => show

     div class="item_conteiner (display:flex) => show

     div class="item_conteiner (display:flex) => show

     div class="item_conteiner (display:flex) => display none

     div class="item_conteiner (display:flex) =>display none

     div class="item_conteiner (display:flex) =>display none

     div class="item_conteiner (display:flex) =>display none

/div

Button  id=btnClick => Click to see all Products

The script I'm running is;

$(document).ready(function () {
     $("#product_content .item_conteiner:nth-of type(n+5)").addClass("hide");
     $("#btnClick").click(function () {
          $("#product_content .item_conteiner:nth-of-type(n+5)").removeClass("hide");
});

});

The script works but for some reason the .hide class with css display:none property does not collapse down, so there is existing space where the hidden div's where located.  It looks more like visibility:hidden I rebuit this in VS and it works correctly but not in HubSpot. any advise would be helpful. Thanks.

[piersg]

Can you give us a link where you're seeing this? It's easier to fix CSS when you can see the actual page 🙂

[dzoladz]

Hello @piersg. Thank you for the assistance. The page I'm referring to is 

https://info.gottmanconnect.com/bundles-just-for-you

Thank you.

[piersg · Accepted solution]

It's because you've given the wrapping #product_content a specific height with inline styling (height: 2199px) and each .item_conteiner is set to absolute positioning (also inline on each element). Remove the height on the parent element and remove the absolute positioning and it should work.

[dzoladz]

@piersg Thank you again for the reply.I don't have any inline styling in this custom module so I'm not sure where it's coming from. What should I set the # product_content height to? And what would you suggest I apply to the .item_conteiner position?

 Thank you again.

[dzoladz]

@piersg I figured it out, I had to add height: auto !important; to both parent div's
and add to position: static !important; to the .item_conteiner's. Thanks again for the help!