Hide Content of Parent Element Without Hiding Children in CSS

Hide content of parent element without hiding children in CSS

display:none; always hides children and overrides their display properties.

You can try using visibility instead:

.parent { visibility: hidden;}
.parent a { visibility: visible;}

How can I hide parent element if child element is hidden?

Okay, according to your description you try this approach, by default hide them all .spr-badge-container
and then on page load check the count and if there is value then show or otherwise leave it hidden.

CSS:

.spr-badge-container{ display: none;}

JS:

winodw.onload = ()=>{
 if(jQuery('.stamped-container').data('count') != '0' ){
   $(".spr-badge-container").css('display', 'block');
   // use CSS or show to display the container
   $(".spr-badge-container").show();
 }
}

Note: JS code using jQuery so must be loaded after the jQuery lib load, otherwise code not works.

Hide parent element if no elements exist in child element

Contrary to your assumption

$(this).children(".careersIntegration__accordion-jobs")

doesn't return the children of elements using the CSS class careersIntegration__accordion-jobs. In fact it only returns the actual elements using this CSS class. If you want to have it's children you need to append another call to .children().

For example:

$(".careersIntegration__accordion").each(function() {
  if ($(this).children(".careersIntegration__accordion-jobs").children().length == 0) {
    $(this).hide();
  } else {
    console.log('has children');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="careersIntegration__listing">

  <!-- this should be hidden -->
  <div class="careersIntegration__accordion">
    <div class="careersIntegration__accordion-header">
      <span class="careersIntegration__accordion-dept">Sales</span>
    </div>
    <div class="careersIntegration__accordion-jobs"></div>
  </div>

  <!-- this should not be hidden -->
  <div class="careersIntegration__accordion">
    <div class="careersIntegration__accordion-header">
      <span class="careersIntegration__accordion-dept">Tech</span>
    </div>
    <div class="careersIntegration__accordion-jobs">
      <div>item</div>
    </div>
  </div>

</div>

Hide certain content from a parent element but show child in CSS

You can use font-size to hide the text, then overwrite it for the child span elements like so:

.price {  font-size: 0px;}
.price span {  font-size: 16px;}

<p class="price">From: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>189.00</span></p>

Hide parent, display child if parent lacks specific class

It's not possible to display a child of an element when the parent is hidden.

Try moving the #nav out of the #splash so it's no longer a child of #nav. Then to achieve the same look, place #nav after the #splash in the markup and use #nav { background-color: transparent } so you can see the main content underneath, and also use #splash {height: calc(100vh - HEIGHTOF#NAV)} to make the #nav stick to the bottom.

Set your scroll position rules in JS to act on the #nav instead of #splash.

Now you're free to hide or show the #splash section without if affecting the #nav

parent hidden but children still visible (I don't want them visible)!

You're not using display: none on the parent (which would affect the children), you're using visibility: hidden on the parent, and within the children have a visibility: visible css attribute. If you want the children to hide, either set them to be visibility: hidden too, or use display: none on the parent element.

So, as Kyle pointed out, you can use $('#parent_div').toggle();, which will easily apply a display: none to #parent_div.

I'll just add that visibility and display are not the same. For example, if an element is width: 10px, height: 10px, visibility retains the element's dimensional space (it still takes up width: 10px, height: 10px), whereas display: none completely removes the dimensions of the element from the parent element (width: 0, height: 0). Visibility means it's still represented visually on flow in relation to other affected elements, it's just not seen; display means it's not seen nor represented on the screen in relation to other displayed/visible elements.

how can I hide parent div if all the children are display:none

Try like this using Jquery.

$(".abc").map(function(){
    let flag = true;
    $(this).find(".xyz").map(function(){
       if($(this).css("display") != "none"){
          flag = false;
       }
    });

    if(flag){
       $(this).css("display", "none");
    }else {
       $(this).css("display", "block");
    }
})

---

Related Topics