How to hide a div with jQuery based on the content from another div

Question

I am trying to hide a div element based on the short content from another div. Can anyone help with this?

Here is an example:

<div class="specs" id="div1">Dynamic Content</div>
<div class="specs" id="div2">Content 2</div>
<div class="specs" id="div3">Content 3</div>
<div class="specs" id="div4">Static Content</div> <!-- Hide this div element if #div1 content = 'Dynamic Content' -->

Basically I need to hide #div4 if the content of #div1 == 'Dynamic Content'.

Thank you in advance!

Answer 1

Convert the text to lowercase, and use $.trim() to remove possible whitespace:

if($.trim($('#div1').text().toLowerCase()) === 'dynamic content'){
    $('#div4').hide();
}

Example Here

Answer 2

$('#div4').css('display',($('#div1:contains("Dynamic Content")').length)?'none':'block')

jsFiddle example

Answer 3

Check to see if the div in question contains the content, then hide the other content as required...

if( $('#div1:contains(Dynamic Content)').length ) {
    $('#div4').hide();
}

Answer 4

if ($("#div1").html() === "Dynamic Content") {
  $("#div4").hide();
}

I will update this answer with more info if you need it.