classList.toggle not working

Question

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.

Any error in your console? Does your browser support [`classList`'s `toggle()` method](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility)? — Frédéric Hamidi, Aug 03 '15 at 14:01
Reading this question and its answers may be helpful: http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass — Robert Longson, Aug 03 '15 at 14:04
Yes, it does, I'm using Chrome, Frédéric. I got my solution from the comment posted by Tomas on that particular question, @Robert. I just found it confusing that people were claiming it to be working when it's not for me? — Bryce, Aug 03 '15 at 14:14

score 6 · Accepted Answer · answered Aug 03 '15 at 14:09

6

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

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

DEMO

answered Aug 03 '15 at 14:09

baao

71,625
17
143
203

That's it. Thank you so much, @michael, sorted out the problem perfectly. Many thanks! – Bryce Aug 03 '15 at 14:16
jQuery has a method to toggle class (with animation) http://api.jquery.com/toggle/ – Robin Huy Aug 11 '17 at 09:47

score 2 · Answer 2 · answered Apr 10 '21 at 08:44

2

Toggle class function in jQuery is toggleClass():

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

answered Apr 10 '21 at 08:44

Sumon Kaysar

51
1
1
5

classList.toggle not working

2 Answers2