TheRealPapa
TheRealPapa

Reputation: 4539

Hide content of <h2> when certain text appears - JQuery

On the face of it, this should be easy but I have stumbled on it for some time already.

I am trying to hide a <h2> only tag when certain text appears. CMS generates the tag. HTML looks like this:

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

If "All Brands" is included in the h2 tag, then I want the tag removed or hidden.

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

if($('#BrandContent > div.h2:contains("All Brands")').length > 0) {
    $('#BrandContent h2').css('visibility', 'hidden')
}

and

 $('#BrandContent h2').remove(":contains('All Brands')");

Thank you in advance for any suggestions. M

Upvotes: 1

Views: 2815

Answers (4)

Dhaval Bharadva
Dhaval Bharadva

Reputation: 3083

You have use wrong selector because "BrandContent" is id and you are useing as class. so it should be like as follow:

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

JSFIDDLE DEMO

Upvotes: 0

Padmanathan J
Padmanathan J

Reputation: 4620

Try

$('#BrandContent > h2:contains("All Brands"))

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

Your selector is wrorg -

it should be like this -

$('#BrandContent > h2:contains("All Brands")')

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

Try this selector

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

Check Fiddle

You were using the id Attribute but using the class selector

id="BrandContent">

Your first try had a small mistake

$('#BrandContent > div.h2

You were looking for a div which has class .h2 which is not present in your HTML

Upvotes: 1

Related Questions