jquerysvgtoggleclass

classList.toggle not working


I'm trying to toggle a cssclass using jQuery on an SVG element each time a div element is clicked.

From what I've read, there are issues doing this with SVG elements and this way was a solution:

$("#div1").click(function() {
    $("#svg1").classList.toggle("clicked");
});`

However, this doesn't work. So I assumed it was due to the use of an SVG element in this function. But when replacing said SVG element with a div element, like this:

$("#div1").click(function() {
    $("#div2").classList.toggle("clicked");
});

the class still won't toggle, despite there being no SVG element in the function.


Solution

  • Please try it with plain javascript, I don't think jQuery has this method.

    $("#div1").click(function() {
        document.getElementById('div2').classList.toggle("clicked");
     });
    

    DEMO