Show Hide div in Chrome Extension popup using jQuery

Question

I've been trying to make an option show and hide(possibly toggle) in my browser action popup without success. The code below is the body of my popup

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup.js"></script>
<div class="show">
    <a href="#" class="showcontent">Show</a>
    <a href="#" class="hidecontent">Hide</a>
    <div class="somecontent">
        <p>some content<br />
            <a href="#">Link</a><br />
        </p>
    </div>
</div>

The popup.js file contains, among other things:

$(document).ready(function(){
    $(".somecontent").hide();
    $(".showcontent").click(function(){
        $(".somecontent").show();
    });

    $(".hidecontent").click(function(){
        $(".somecontent").hide();
    });
});

I believe the problem is that the Chrome API is having problems with my popup.js file. The body appears in my popup but the Show and Hide actions do not work. Any ideas how to make this work and if not, another way to get the same result (ie: toggle on click)?

EDIT: From the javascript Console, the error I'm getting this error:

Uncaught TypeError: Cannot call method 'ready' of null

Which points to the line of the above code using the ready function.

Solution 1

It's also possible that jQuery is conflicting with something else in your page for the use of the $() function. (I just ran into this problem myself.) If that's the case, changing the $() calls to jQuery() should solve the issue.

Solution 2

Since you are neither returning false from your click handlers nor calling preventDefault(), the page will get reloaded on clicking and the .somecontent will be hidden again. Change your JS to following:

$(document).ready(function(){
    $(".somecontent").hide();
    $(".showcontent").click(function(){
        $(".somecontent").show(); return false;
    });

    $(".hidecontent").click(function(){
        $(".somecontent").hide(); return false;
    });
});

Comments

[Guibone]

Here's what it's giving me Uncaught TypeError: Cannot call method 'ready' of null Which is from the jQuery $(document).ready(function(){... at the beginning of my popup.js code Thanks for the console tip by the way.

[Guibone]

Though that did fix some of the errors, I'm left with this one: Uncaught TypeError: Cannot call method 'ready' of null Which is from the jQuery $(document).ready(function(){... at the beginning of my popup.js code Cheers.

[jspcal]

try the jquery.js alert document

[Guibone]

After trying the alert document, I now only receive this error. "Uncaught TypeError: Cannot call method 'hide' of null". The alert made a popup message appear with null inside.

[jspcal]

seems like it's not loading jquery, what if you try ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js (the latest, hosted from google) as a test..?

[Guibone]

That is what I tried unfortunately. The ready method "works" but once it gets to "hide" or "show" it gives me that error. :(

[Sean McMains]

Haha! Delighted to hear that it helped, Jon. :)

[DownDown]

Tnx for this answer this really helped me out!