Want to use jQuery.nextUntill but exclude div inbetween

Question

I'm new to jQuery, so please excuse me!

I have a PHP function that returns me a blog from a MySQL database; it returns the title, subtitles and contents.

$result = getData(); while($row = mysqli_fetch_array($result)) { extract($row); ?> <div class="headline"><?php echo $headline ?></div> <div class="subtitle"><?php echo $subTitle ?></div> <div class="content"><?php echo $content ?></div> <?php } 

While three records are displayed. I have jQuery that hides content and expands it when the header is clicked using the nextUntill and .slideToggle method in the content.

  $(".content").hide(); $(".headline").click(function(){ $(this).nextUntil(".headline").slideToggle(500); }); 

my problem is that slideToggle is executed on each div until the next title, which includes subtitles. Therefore, when the title lights up, the content is displayed, but the title disappears.

I can’t just select the content for the slide, as it will show all three sections of the content that will be displayed.

Is there a way to exclude subtitles between the title and the content?

Thanks in advance!

Answer 1

Assuming I understand you correctly, you want to hide the next .content element. If it is right, you can get the first element corresponding to this selector from the set of the following siblings:

 $(this).nextAll(".content").eq(0).slideToggle(500); 

Or, to do this, as you suggest, you can use not :

 $(this).nextUntil(".headline").not(".subtitle").slideToggle(500); 

Here is a working example of the first version.

Answer 2

I guess, since I understood the question this way, so you can try not Selector . not ()

 $(this).nextUntil(".headline").not(".subtitle").slideToggle(500);