Opposite of :contains - Make h2 visible if it does not contain specific text

Question

I just asked pretty much the opposite of this question and had great help, so thank you. Challenge now is that the page loads with the heading visible, then it hides it (disappears) so it does not look professional. So I am, using what I learned from your suggestions, trying to do this the opposite way. I have hidden the <h2> in CSS and now want the JQuery to make it visible if it does not contain the text "All Brands".

The HTML looks like this:

<div class="Block Moveable Panel" id="BrandContent">
  <h2>All Brands</h2>           <--- ALWAYS HIDDEN IN CSS
  <div class="BlockContent">
     BRANDS LISTED HERE...
  </div>
</div>

I have tried a few combinations of the below code without success:

$('#BrandContent > h2:not(:contains("All Brands")').css('visibility', 'visible');

and

$('#BrandContent > h2:not(:contains("All Brands")').show();

Thank you in advance for any suggestions. M

Answer 1

try this:

$(document).ready(function(){
    $('#BrandContent > h2:not(:contains("All Brands"))').show();  
});  

CSS:

Replace:

#BrandContent h2 {
    padding-bottom: 20px;
    visibility: hidden;
}  

To:

#BrandContent h2 {
    padding-bottom: 20px;
    display: none;
}

JSFIDDLE DEMO