jquery hide() function

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. :P

Any help is much appreciated.

is it possible that the 'hide' class and the 'hide' action are conflicting. What happens if you change your class to 'myhide'? — dnagirl
– dnagirl, Commented Mar 31, 2011 at 15:03
@amosriva No, this is obvious from the extra brackets at the end of the code — mattsven
– mattsven, Commented Mar 31, 2011 at 15:04
@NeXXeuS the first closes the click event the second the on document ready, there are no extra brackets this is obvious ;) — amosrivera
– amosrivera, Commented Mar 31, 2011 at 15:06

Nick Craver · Accepted Answer · 2011-03-31 15:10:40Z

4

Your .click() handler is on the <h5> element, from there it's trying to hide the .next() sibling element...there aren't any of those.

Instead of this:

$(this).next().slideToggle("slow");

You'd need something like .nextAll() (that searches all following siblings) on the <a>:

$(this).parent().nextAll('.hide:first').slideToggle("slow");

You can try it out here.

Alternatively, maybe a bit cleaner, you can add a class to the anchor to simplify things, like this:

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

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

Then, since you're on the <a>, you don't need the .parent() call, like this:

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

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

You can try that version out here.

edited Mar 31, 2011 at 15:10

answered Mar 31, 2011 at 15:05

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ant Over a year ago

I don't think that the script gets to the click(). It looks like the browser has issue with the hide() and says "I give up..."

Nick Craver Over a year ago

@Ant - Do you have prototype included on the page as well (in addition to jQuery)?

Ant Over a year ago

yeah, that turned out to be the problem. had to switch the $ with the word jQuery, and it works fine now. Thanks!

Nikhil · Accepted Answer · 2011-03-31 15:53:58Z

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

edited Mar 31, 2011 at 15:53

answered Mar 31, 2011 at 15:06

Nikhil

3,3842 gold badges31 silver badges44 bronze badges

5 Comments

Peter Olson Over a year ago

Did you actually test his code to see if it worked? If you did, I think you would have found that the problem wasn't quite that trivial.

Nikhil Over a year ago

I did create a JSFiddle using the exact code given here. It ran perfectly well without any errors.The original question was about hide() being NULL and nothing else. Why dont you create a JS Fiddle yourself and try it out? I did ask him to put his code on a site so we can see exactly what's going on. Quick with the gun on the downward vote arent you?

Ant Over a year ago

The page that it is on is messiah.edu/offices/_hr/applicants/applying.html

Nikhil Over a year ago

I feel so much like the guy who can say "I told you so". The sample that you have given us in the original problem will always work Ant. The problem is NOT in your code as I originally claimed. I am editing my original answer now to explain what is going on.

Ant Over a year ago

works like a charm now! I didn't realize the prototype was in there (too many fingers in the cookie jar....) Thanks a lot!

Dutchie432 · Accepted Answer · 2011-03-31 15:10:00Z

0

I have whipped up a small, simple example of how to do this (DEMO). I think this may be a little cleaner than your current method. I never liked using <a> as the header.

HTML

<div class="accItem">
    <div class="togHead">Heading1</div>
    <div class="togContent">The content1</div>
</div>

<div class="accItem">
    <div class="togHead">Heading3</div>
    <div class="togContent">The content3</div>
</div>

JS

$('.togContent:first').slideDown();
$('.togHead').click(function(){
    var item = $(this).parent().find('.togContent');
    if (! $(item).is(':visible')){
        $('.togContent').slideUp();
        $(item).slideDown("fast");
    }            
});

CSS

.togHead{
    width:300px;
    background:#000;
    color:#fff;
    font-size:20;
    font-weight:bold;
    cursor:pointer;
}
.togContent{
    display:none;
    width:300px;
    background:#ff0;    
}

answered Mar 31, 2011 at 15:10

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

1 Comment

Nick Craver Over a year ago

There's no need for all that traversing...you can just do .siblings('.togContent') for example, also in your example item is already a jQuery object, no need to clone it :)

Collectives™ on Stack Overflow

jquery hide() function

3 Answers 3

3 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related