Toggleclass not working, altough should

Question

This is pretty basic, still doesn't work... I'm trying to change the class of my button, which has the id "nav_list". I wrote the script:

    var specialSection = document.getElementById("nav_list");
    specialSection.onclick = function() {
    alert("what");
    $('#nav_list').toggleClass('active');
    };

I get the "what" alert, but the class isn't toggled. What am I missing? Thanks in advance!

Answer 1

toggleClass is a jQuery method, for use it you must include jQuery in your page.

Like:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

At the moment if you check the console you must see an error like (demo: http://jsfiddle.net/IrvinDominin/GyaBY/):

ReferenceError: Can't find variable: $

Avoid mixing jQuery and javascript event binding so your code will look like:

$('#nav_list').click(function() {
    alert("what");
    $(this).toggleClass('active');
});

Demo: http://jsfiddle.net/IrvinDominin/GyaBY/2/