Hide item if next is empty

Question

I have the following code:

<h3 class="hideIfDivEmpty">title</h3> <div id="divId"></div> 

I would like to hide the h3 element when the div is empty. I want to change the structure of html, but h3 must be outside the div because its contents are dynamically changing.

Is there a way to do this in CSS?

Answer 1

There is no syntax to select a parent or any other non-child from #divid . You can select #divid if it is empty on #divid:empty , but you cannot select .hideIfDivIsEmpty in any browser by selecting this. According to this question , there is such a thing ( specifications ) in CSS4, but it is not supported in any browser, and according to the same specifications, the selector is too slow to be implemented in browsers.

See other javascript solution answers for this problem.

Answer 2

Ok, wait until you get very good answers. but my solution would be to make a css class and then assign it to both the h3 and div tags, and then use jquery selectors to get both of them using the css class. Now you will get arry tags, if the element at index 1 innertext = null or empty, then the element at index 0 should hide. i hope this helps

Answer 3

I do not think you can do this with CSS.

Use jQuery instead:

 var divs = $(".hideIfDivEmpty"); divs.each(function () { var div = $(this); if (div.next().html() === "") { div.hide(); } }); 

JSFIDDLE

And as @Prinzhorn correctly said: there is a liner solution:

 $('h3.hideIfDivEmpty + div:empty').prev().hide(); 

JSFIDDLE

Answer 4

This problem can only be solved on the client side using JavaScript (or one of its libraries). Using regular JavaScript, I would suggest:

 function hideIfNextEmpty(el) { var text = 'textContent' in document ? 'textContent' : 'innerText'; if (el.nextElementSibling[text].replace(/\s/g,'').length === 0) { el.style.display = 'none'; } } hideIfNextEmpty(document.querySelector('h3.hideIfDivEmpty')); 

JS Fiddle demo .

Answer 5

The CSS version will not have very good browser support. This would include placing a title tag after the content, and then controlling the positioning of the elements.

Here is a very hacked CSS only solution. IE 9+. You must do this using JavaScript, as others have suggested.

http://jsfiddle.net/znLMe/

CSS

 article p:empty + header { display: none; } article p:empty { margin: 0; } article p { float:left; } article header { position: absolute; top: 0; } article header h1 { margin: 0; } article > p:first-of-type:not(:empty) { padding-top: 1em; } article { position: relative; } /* include clearfix */ 

HTML

 <article class="clearfix"> <p></p> <header><h1>Hidden article</h1></header> </article> <article class="clearfix"> <p>Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p> <header><h1>Porta Malesuada</h1></header> </article> 

Answer 6

How is the content of the <div> entered? Because a solution other than JS would simply include class input (for example, "hidden"). If you manually enter content in HTML, you can add classes yourself. If you dynamically load content through a template, you should be able to write simple logic that applies the class to the <h3> element based on the content that should be entered in the <div> .

Answer 7

Add your shortcut using the :: before selector.

Hide label for null / null values ​​with : empty selector

(Both require IE9 +)

HTML

 <div class="label l_colour"></div> <div class="label l_size"></div> <div class="label l_shape"></div> 

CSS

 /* HIDE IF EMPTY*/ .att_label:empty { display: none; } /* LABEL STYLES */ .att_label::before { font-weight:bold; } /* LABEL VALUES */ .att_colour::before { content:"Colour: "; } .att_size::before { content: "Size: "; } .att_pattern::before { content: "Pattern: "; } 

Answer 8

I am ready to change the structure of HTML ...

The answer is YES with such a flexible structure. Let the DIV precede the H3 element and add the following CSS rule:

 // testing purposes only | see css and new html structure document.querySelector('button').addEventListener('click', function() { var el = document.querySelector('#divId'); if(el.textContent.length > 0) { el.textContent = ""; } else { el.textContent = "Hello world!"; } }); 

 div#divId:empty + h3.hideIfDivEmpty { display: none; } 

 <div id="divId">Hello world!</div> <h3 class="hideIfDivEmpty">title</h3> <!-- Button adds and removes text within div --> <button>Toggle Text</button>