CODEWITHSUNDEEP
jqueryhide
Ant
Ant

Reputation: 42

jquery hide() function

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.

Upvotes: 0

Views: 2635

Answers (3)

Nikhil
Nikhil

Reputation: 3384

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

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630379

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.

Upvotes: 4

Dutchie432
Dutchie432

Reputation: 29160

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;    
}

Upvotes: 0

Related Questions