Geek Answers Handbook

Is there a way to hide all divs inside the parent div / container by adding an inline style to the parent?

I am trying to figure out whether it is possible to hide all child divs inside the parent container by adding an inline style to the parent div. I tried both visibility: hidden; and display: none; None of them hide child divs. I thought I could just use some jquery to scroll through all the child divs and add an inline style for each of them, although I believe there should be a way that works.

Here is an example:

CSS

  .hero-content { text-align: center; height: 650px; padding: 80px 0 0 0; } .title, .description { position: relative; z-index: 2 }

HTML

 <div class="hero-content"> <div class="title"> This is a title </div> <div class="description"> This is a description</div> </div>
+6
source share
6 answers

You cannot hide child elements using the inline style for the parent element, so use display: none; for your children, you don’t need an inline style for this

 .hero-content > div.title, .hero-content > div.description { display: none; }

Or if you are going with a jQuery solution, than add a class to the parent element and use the selector below.

 .hide_this > div.title, .hide_this > div.description { display: none; }

Now add the .hide_this class to the parent using jQuery.

 $(".hero-content").addClass("hide_this");

Demo (using .addClass() )

Or if you're a fan of inline style than here, you go

 $(".hero-content .title, .hero-content .description").css({"display":"none"});

Demo 2

+2
source

Using jquery?

 $(".hero-content > *").css('display','none');

It will add a built-in style = "display: none" to what has ever been a child of the first-level level ELEMENT .hero-content.

It means:

 <div class="hero-content"> <div class="title"> This is a title </div> <div class="description"> This is a description</div> This text in NOT in an element so will remain visible. </div>

Using css:

 .hero-content > * {display:none}

jsFiddled here

notes about not in js element

+3
source

Since you are using z-index , display:none fails .... see this demo with z-index removed and it works !!

CSS

 .hero-content { text-align: center; height: 650px; padding: 80px 0 0 0; } .title, .description { position: relative; display:none }
+2
source

You can simply use the CSS selector for this purpose.

.hero-content div will apply to all div elements within an element with the hero-content class.

.hero-content > div will be applied to all div elements directly inside the element with the hero-content class.

So your second CSS selector should be:

 .hero-content div { position: relative; z-index: 2 display: none; }
+1
source

Choose this 1: -

http://jsfiddle.net/8DGKB/

 .hero-content div { display: none; }
+1
source

Try it,

Through jQuery you should use below code when loading your page.

 <div Id="ParentDivId" class="hero-content"> <div Id="ChildDivIdFirst" class="title"> This is a title </div> <div Id="ChildDivIdSecond" class="description"> This is a description</div> </div> $("#ParentDivId").find('#ChildDivIdFirst').css('display','none') $("#ParentDivId").find('#ChildDivIdSecond').css('display','none')
+1
source

More articles:


All Articles