Display HTML Child Element When Parent Element Is Display:None

Display HTML child element when parent element is display:none

No this isn't possible. display:none hides the element, and thus any child elements will not be displayed.

EDIT:

This might be along the lines of what you want, if you're able to switch from using display to visibility.

.hide {visibility: hidden;}
.reshow {visibility: visible;}

Using this method you can hide the contents of the parent element but show the specific <li> you want. The only caveat is the parent markup will still take up screen real estate. Just won't be shown to the user. That may or may not break the layout you're looking for.

http://jsfiddle.net/vLYnk/2/

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");
    }
})

How to set a child element display property to none when the parent element is set to block

try overriding other external definitions by using !important tag after the property

document.getElementById("purchaseItem " + purchase.paintingNumber).style.display = "block !important";

read more about it at MDN web docs

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.

Set parent to display:none, set child to display:block

It looks like you just want to knock out the background of the parent in certain layouts. To do that, just use

#knockout {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;        
    padding: 0;
}

This will remove the background, the borders and any shadow effects on the parent item - as though it wasn't rendered at all.

jQuery: When parent element is clicked, hide child element. When child element is clicked, don't hide it

You can accomplish that by binding an event to the child and stop the propagation.

  $('#parent').click(function() {
     $('#child').toggleClass('display');
  });
  $('#child').click(function(e) {
     e.stopPropagation();
  });

More information can be found here

Updated Fiddle

---

Related Topics