Question

I’m trying to create a sliding FAQ menu using jQuery, but I’m getting an error that states the the hide() is null. I’ve tried it in Chrome and Firefox on Mac and Firefox on Win. Here’s the code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('.hide').hide();

    $('h5').click(function(){
    $(this).next().slideToggle("slow");
    return false;
});


});

And here is the HTML:

<a href="#" ><h5 >The Heading </h5></a><br />

<div class="hide">
The content.
</div>

I’ve spent the last three hours pouring over books and tutorials online and everything looks right, but apparently not. 😛

Any help is much appreciated.

Answer 1

Update: After Ant published the public URL of the page I can confidently reiterate my claim that there is no problem in the sample code posted by Ant in his original question so thank you whoever down voted me. The problem is that Ant’s page is using both prototype and jQuery libraries together. This fact is omitted from the original question. These two libraries are conflicting over $ variable. If you change your code Ant to use the keyword jQuery instead of $ everywhere as

 jQuery(document).ready(function() {
     jQuery('.hide').hide();

     jQuery('.toggler').click(function() {
         jQuery(this).nextAll('.hide:first').slideToggle("slow");
         return false;
     }); });

I am confident your code will work. Alternatively you can use the no conflict technique as described on jQuery pages here

http://api.jquery.com/jQuery.noConflict/

There is nothing wrong with your code. Can you put this on a public site and share the URL? The only thing I can think of is that jQuery is not being pulled in.

Try moving the

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

in the HEAD tag

and the rest of the javascript code after the closing

 </HTML>

tag