[Solved] Class toggle in jQuery

Question

Fix the toggleClass call, you only need the class name, not the selector: toggleClass('over') instead of toggleClass('p.over').

Then, you have two opening script tags:

<script type="text/javascript" language="javascript">
<script>

Remove the first one.

Next, you’re binding an event listener to an element that’s not in the DOM yet at the time the script executes.

Simple fix: move the script to the bottom of the page.

Another way: either execute the script when the DOM is ready (by wrapping it inside a document ready callback: $(document).ready()) or use dynamic binding using jQuery’s on function.

Here is a working version: http://jsfiddle.net/7g95yvyo/

And the last, but not the least, learn to use browser’s console – it will help you tremendeously while learning and debugging JavaScript.

Accepted Answer