cant get jquery toggle function working

Question

trying to swap two images depending on which the user has clicked.

so it should hide the image that the user has just clicked and show the one that was hidden.

must be something simple wrong here...

<!-- toggle for contrast buttons -->
<script type=text/javascript>
        $("a.contrast-button").click(function () {
            $("a.contrast-button").toggle();
        });
</script>



<div class="span-16 last" id="access-controls">
    <a class="contrast-button" id="switchDark" href="#"><img src="/static/images/contrast-dark.png" /></a>
    <a class="contrast-button" id="switchRed" style="display:none;" href="#" ><img src="/static/images/contrast-light.png" /></a>
    <a class="access-nav" href="#">contrast:</a>
</div>

user113716 · Accepted Answer · 2011-08-20 15:08:03Z

1

Works as long as you assign the handler on .ready().

Example: http://jsfiddle.net/6NvN8/

 // v------ensures the DOM is ready before running code within
$(function() {
    $("a.contrast-button").click(function() {
        $("a.contrast-button").toggle();
    });
});

If the order of your code is exactly as you show it in the question, then the elements do not exist yet when the jQuery code runs.

If you just flipped it around, it would also make it work.

Example: http://jsfiddle.net/6NvN8/1

<div class="span-16 last" id="access-controls">
    <a class="contrast-button" id="switchDark" href="#"><img src="/static/images/contrast-dark.png" /></a>
    <a class="contrast-button" id="switchRed" style="display:none;" href="#" ><img src="/static/images/contrast-light.png" /></a>
    <a class="access-nav" href="#">contrast:</a>
</div>


<!-- toggle for contrast buttons -->
<script type=text/javascript>
        $("a.contrast-button").click(function () {
            $("a.contrast-button").toggle();
        });
</script>

This is because the elements have a chance to load before your script runs.

answered Aug 20, 2011 at 15:08

user113716

323k64 gold badges454 silver badges441 bronze badges

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

3 Comments

bytejunkie Over a year ago

I've had it working in a fiddle too, but nothing in the actual page. how do i trouble shoot this? i know i crack open firebug but not sure what i need to do then.

bytejunkie Over a year ago

just seen your edit. i've shifted the js to the footer, before the /body tag and it still doesn't run.

user113716 Over a year ago

@shofty: First look for errors in the console using the browser's developer tools. If no errors, then there must be some issue in code that you haven't posted.

Collectives™ on Stack Overflow

cant get jquery toggle function working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related