Question

I am afraid I similar question might be already asked somewhere, but I wasn’t able to find a solution.

Here’s roughly my environement + purpose:
I have a very simple HTML JQuery Setup whose intent is do collapse the later content when a page has more than 5 h3’s. Each h3 is followed by 1 or more paragraphs. If a page does have more than 5 h3’s every content belonging to the h3 should be automatically collapsed (hidden), shown when the corresponding h3 is clicked and hidden, when clicked again.

Here’s my jquery code:

$(document).ready(function() {

if ($('h3').length > 4) {
    var headlines = $('h3').slice(3);
    var start = $('h3').slice(3,4);     
    var content = start.nextAll().not('h6');

    headlines.addClass('expandable-headline');
    content.hide(); 

    headlines.click(function() {        
        var successors = $(this).nextUntil('h3');
        successors.toggle();
        $(this).toggleClass('expandable-headline');
    }); 
}
});

Here’s my html:

< h3>ABC</h3 >  
< p>some nice content</p >
< h3>ABC</h3>
< p>some nice content</p>
< p>some even nicer content</p>

Last but not least, here’s my problem:

All code above works perfect when run locally in simple test files, but when I try it inside my production system (a Drupal site) it throwns an error at

 var successors = $(this).nextUntil('h3');

stating, that $(this).nextUntil is not a function.

Any ideas, what this is about?

I appreciate any help.
Best Greeets,
Sunny

Answer 1

Are your versions of jQuery the same?

To test this, insert this line of code somewhere into your script on each page:

alert(jQuery.fn.jquery);

It’ll alert() your version number.

If your search the jQuery changelog for nextUntil, you’ll see that it was added in version 1.4, so your Drupal jQuery version might be old.

If you are planning on upgrading jQuery (I don’t use Drupal. WordPress works fine for me), this question seems relevant: Drupal 6: best way to upgrade jQuery?.