jQuery - hide if previous element has a particular class

Question

Hi

I would like to hide all class="csc-content" where previous sibling is a h4 class="faq".

UPDATE Error: I think this is wrong... the previous sibling is not h4. But I hope you get the point that all "answer" shall be hidden if the "question" has the class "faq" /UPDATE

This is the html:

<div id="centerCol-1">
  <div id="c65" class="csc-default normal">
    <div class="csc-header csc-header-n1"><h4 class="faq">FAQ question1</h4></div>
    <div class="csc-content active"><p class="bodytext">Answer1</p></div>
  </div>
  <div id="c67" class="csc-default normal">
    <div class="csc-header csc-header-n2"><h4 class="faq">FAQ question2</h4></div>
    <div class="csc-content active"><p class="bodytext">Answer2</p></div>
  </div>
  <div id="c68" class="csc-default normal">
    <div class="csc-header csc-header-n3"><h4>not FAQ</h4></div>
    <div class="csc-content active"><p class="bodytext">Not an answer, just normal content</p></div>
  </div>
</div>

jQuery should be something like:

// find all outer divs with class csc-default in the div centerCol-1
// test if they contain a header div with an h4 class faq
// go to next element and hide it. Error... this should be parents next element?
$("#centerCol-1 .csc-default").find("h4").is(".faq").next(".csc-content").hide();

BR. Anders

Answer 1

You need to use the adjacent selector along with the :has selector, like this:

$('#centerCol-1 .csc-default .csc-header:has(.faq)+.csc-content').hide();

Demo

Answer 2

Try this:

$("#centerCol-1 .csc-content").filter(function() {
  return $(this).prev().find(".faq").length > 0;
}).hide();

Answer 3

Hang on, you only want to hide the answer div for each FAQ question? So if the h4 has the class .faq, the div immediately after the parent div gets hidden:

$("#centerCol-1 h4.faq").parent().next("div").hide();