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.

Answer 1

probably popup.js is causing a parse/exec error? try seeing if chrome can print errors with:

JavaScript Console: click the Page menu icon and select Developer - JavaScript Console. From here, you'll be able to view errors in the JavaScript execution, and enter additional JavaScript commands to execute.

JavaScript Debugger: available as Page menu icon 0 Developer - Debug JavaScript, the debugger provides a command prompt from which you can set breakpoints, backtrace, and more. Type help at the debugger command line to get started.

from here

that error you got could happen if jquery isn't loaded:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;

<script>alert($(document))</script>

it should popup the object...

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

Answer 3

That error means jQuery is not being loaded properly. Check to make sure it's called jquery.js and stored in the root folder.

Answer 4

Your code worked fine for me. As other said the error you're getting sounds like the jquery.js file isn't being found/loaded. This is a long shot, but if you're on Windows check the properties of the jquery.js file and see if there's an Unblock button right on the first tab. Click it.