How is works toggleClass with SVG?

Question

$(document).ready(function(){
$('#myid').click(function(){
$(this).toggleClass('open');
$('.myclass').find('svg.adcl').toggleClass('test');  

});
});

.IconNav-img{font-size:30px;width:3em;}
.test{width:10em!important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myid" class="some">
 <div class="myclass">
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="adcl IconNav-img mb-1"><title>1clr-code-review</title><path d="M53 14H36.54l-3.11-4.66A3 3 0 0 0 30.93 8H11a3 3 0 0 0-3 3v34a3 3 0 0 0 3 3h21v5a3 3 0 0 0 3 3h8.06a1 1 0 0 1 .77.36l2.63 3.16a2 2 0 0 0 1.53.72 2 2 0 0 0 .69-.12A2 2 0 0 0 50 58.24V48h3a3 3 0 0 0 3-3V17a3 3 0 0 0-3-3zm-21.24-3.55L34.13 14h-5.06a1 1 0 0 1-.83-.45L25.87 10h5.06a1 1 0 0 1 .83.45zM10 11a1 1 0 0 1 1-1h11.93a1 1 0 0 1 .83.45l2.81 4.22a3 3 0 0 0 2.5 1.33H53a1 1 0 0 1 1 1v4H10zm38 47.24l-2.63-3.16A3 3 0 0 0 43.06 54H35a1 1 0 0 1-1-1V43a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM53 46h-3v-3a3 3 0 0 0-3-3H35a3 3 0 0 0-3 3v3H11a1 1 0 0 1-1-1V23h44v22a1 1 0 0 1-1 1z" fill="#23292f"></path><path d="M21 29h-2v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2zM27 31h12a1 1 0 0 0 0-2H27a1 1 0 0 0 0 2zM49 29h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2zM34 34h-7a1 1 0 0 0 0 2h7a1 1 0 0 0 0-2zM49 34H38a1 1 0 0 0 0 2h11a1 1 0 0 0 0-2zM43.29 45.29L40 48.59l-1.29-1.29a1 1 0 0 0-1.41 1.41l2 2a1 1 0 0 0 1.41 0l4-4a1 1 0 0 0-1.41-1.41z" fill="#23292f"></path><circle cx="13" cy="13" r="1" fill="#23292f"></circle><circle cx="17" cy="13" r="1" fill="#23292f"></circle><circle cx="21" cy="13" r="1" fill="#23292f"></circle></svg>


 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="IconNav-img mb-1"><title>1clr-social-coding</title><path d="M25.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 14 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM19 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM45.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 34 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM39 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM33.33 14a1 1 0 0 0-1.19.76l-2.22 10a1 1 0 0 0 .75 1.24h.22a1 1 0 0 0 1-.78l2.22-10a1 1 0 0 0-.78-1.22zM24.7 16.29a1 1 0 0 0-1.41 0l-3 3a1 1 0 0 0 0 1.4l3 3a1 1 0 1 0 1.42-1.4L22.45 20l2.27-2.3a1 1 0 0 0-.02-1.41zM40.71 16.3a1 1 0 1 0-1.42 1.4l2.26 2.3-2.27 2.3a1 1 0 1 0 1.42 1.4l3-3a1 1 0 0 0 0-1.4z" fill="#23292f"></path><path d="M53 8H11a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h7.59l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71h13.18l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71H53a3 3 0 0 0 3-3V11a3 3 0 0 0-3-3zm1 21a1 1 0 0 1-1 1h-8a1 1 0 0 0-.71.29L42 32.59l-2.29-2.29A1 1 0 0 0 39 30H25a1 1 0 0 0-.71.29L22 32.59l-2.29-2.29A1 1 0 0 0 19 30h-8a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h42a1 1 0 0 1 1 1z" fill="#23292f"></path></svg>
  Title
  </div> 
 </div>

When clicking myid, the test class will be toggle with SVG. How is work toggleClass with SVG?

score 0 · Answer 1 · answered Sep 28 '18 at 22:42

Okay so two issues. First issue is that Your second toggleClass is referencing $('myclass') but you actually probably want $('.myclass') since you are trying to refer to a class name which requires the ..

Second issue, a little more pressing, is it seems that jQuery had an issue before jQuery v3 that didn't understand how to add classes to SVGs unless you modified the attributes by using jQuery.attr. For more info look in the link.

It looks like Stack snippets doesn't have it in the dropdown but you can add it in yourself. I went ahead and added those updates for you.

$(document).ready(function(){
$('#myid').click(function(){
$(this).toggleClass('open');
$('.myclass').find('svg.adcl').toggleClass('test');  

});
});

.IconNav-img{font-size:30px;width:3em;}
.test{width:10em!important;}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="myid" class="some">
 <div class="myclass">
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="adcl IconNav-img mb-1"><title>1clr-code-review</title><path d="M53 14H36.54l-3.11-4.66A3 3 0 0 0 30.93 8H11a3 3 0 0 0-3 3v34a3 3 0 0 0 3 3h21v5a3 3 0 0 0 3 3h8.06a1 1 0 0 1 .77.36l2.63 3.16a2 2 0 0 0 1.53.72 2 2 0 0 0 .69-.12A2 2 0 0 0 50 58.24V48h3a3 3 0 0 0 3-3V17a3 3 0 0 0-3-3zm-21.24-3.55L34.13 14h-5.06a1 1 0 0 1-.83-.45L25.87 10h5.06a1 1 0 0 1 .83.45zM10 11a1 1 0 0 1 1-1h11.93a1 1 0 0 1 .83.45l2.81 4.22a3 3 0 0 0 2.5 1.33H53a1 1 0 0 1 1 1v4H10zm38 47.24l-2.63-3.16A3 3 0 0 0 43.06 54H35a1 1 0 0 1-1-1V43a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM53 46h-3v-3a3 3 0 0 0-3-3H35a3 3 0 0 0-3 3v3H11a1 1 0 0 1-1-1V23h44v22a1 1 0 0 1-1 1z" fill="#23292f"></path><path d="M21 29h-2v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2zM27 31h12a1 1 0 0 0 0-2H27a1 1 0 0 0 0 2zM49 29h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2zM34 34h-7a1 1 0 0 0 0 2h7a1 1 0 0 0 0-2zM49 34H38a1 1 0 0 0 0 2h11a1 1 0 0 0 0-2zM43.29 45.29L40 48.59l-1.29-1.29a1 1 0 0 0-1.41 1.41l2 2a1 1 0 0 0 1.41 0l4-4a1 1 0 0 0-1.41-1.41z" fill="#23292f"></path><circle cx="13" cy="13" r="1" fill="#23292f"></circle><circle cx="17" cy="13" r="1" fill="#23292f"></circle><circle cx="21" cy="13" r="1" fill="#23292f"></circle></svg>


 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="IconNav-img mb-1"><title>1clr-social-coding</title><path d="M25.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 14 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM19 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM45.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 34 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM39 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM33.33 14a1 1 0 0 0-1.19.76l-2.22 10a1 1 0 0 0 .75 1.24h.22a1 1 0 0 0 1-.78l2.22-10a1 1 0 0 0-.78-1.22zM24.7 16.29a1 1 0 0 0-1.41 0l-3 3a1 1 0 0 0 0 1.4l3 3a1 1 0 1 0 1.42-1.4L22.45 20l2.27-2.3a1 1 0 0 0-.02-1.41zM40.71 16.3a1 1 0 1 0-1.42 1.4l2.26 2.3-2.27 2.3a1 1 0 1 0 1.42 1.4l3-3a1 1 0 0 0 0-1.4z" fill="#23292f"></path><path d="M53 8H11a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h7.59l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71h13.18l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71H53a3 3 0 0 0 3-3V11a3 3 0 0 0-3-3zm1 21a1 1 0 0 1-1 1h-8a1 1 0 0 0-.71.29L42 32.59l-2.29-2.29A1 1 0 0 0 39 30H25a1 1 0 0 0-.71.29L22 32.59l-2.29-2.29A1 1 0 0 0 19 30h-8a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h42a1 1 0 0 1 1 1z" fill="#23292f"></path></svg>
  Title
  </div> 
 </div>

Yes, it was a little mistake, I just fixed now. – Smaller Sep 29 '18 at 03:53 — Smaller, Sep 29 '18 at 03:53
Ah I see @Smaller did this address your issue though? – aug Oct 01 '18 at 21:25 — aug, Oct 01 '18 at 21:25

score 0 · Answer 2 · answered Sep 29 '18 at 01:43

Its fixed and working perfectly. Please try below code snippet.

$(document).ready(function(){
   $('#myid').on('click', '.adcl', function() {
      $(this).toggleClass('test');
    });
});

.IconNav-img{font-size:30px;width:3em;}
.test{width:10em!important;}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="myid" class="some">
 <div class="myclass">
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="adcl IconNav-img mb-1"><title>1clr-code-review</title><path d="M53 14H36.54l-3.11-4.66A3 3 0 0 0 30.93 8H11a3 3 0 0 0-3 3v34a3 3 0 0 0 3 3h21v5a3 3 0 0 0 3 3h8.06a1 1 0 0 1 .77.36l2.63 3.16a2 2 0 0 0 1.53.72 2 2 0 0 0 .69-.12A2 2 0 0 0 50 58.24V48h3a3 3 0 0 0 3-3V17a3 3 0 0 0-3-3zm-21.24-3.55L34.13 14h-5.06a1 1 0 0 1-.83-.45L25.87 10h5.06a1 1 0 0 1 .83.45zM10 11a1 1 0 0 1 1-1h11.93a1 1 0 0 1 .83.45l2.81 4.22a3 3 0 0 0 2.5 1.33H53a1 1 0 0 1 1 1v4H10zm38 47.24l-2.63-3.16A3 3 0 0 0 43.06 54H35a1 1 0 0 1-1-1V43a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM53 46h-3v-3a3 3 0 0 0-3-3H35a3 3 0 0 0-3 3v3H11a1 1 0 0 1-1-1V23h44v22a1 1 0 0 1-1 1z" fill="#23292f"></path><path d="M21 29h-2v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2zM27 31h12a1 1 0 0 0 0-2H27a1 1 0 0 0 0 2zM49 29h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2zM34 34h-7a1 1 0 0 0 0 2h7a1 1 0 0 0 0-2zM49 34H38a1 1 0 0 0 0 2h11a1 1 0 0 0 0-2zM43.29 45.29L40 48.59l-1.29-1.29a1 1 0 0 0-1.41 1.41l2 2a1 1 0 0 0 1.41 0l4-4a1 1 0 0 0-1.41-1.41z" fill="#23292f"></path><circle cx="13" cy="13" r="1" fill="#23292f"></circle><circle cx="17" cy="13" r="1" fill="#23292f"></circle><circle cx="21" cy="13" r="1" fill="#23292f"></circle></svg>


 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="adcl IconNav-img mb-1"><title>1clr-social-coding</title><path d="M25.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 14 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM19 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM45.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 34 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM39 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM33.33 14a1 1 0 0 0-1.19.76l-2.22 10a1 1 0 0 0 .75 1.24h.22a1 1 0 0 0 1-.78l2.22-10a1 1 0 0 0-.78-1.22zM24.7 16.29a1 1 0 0 0-1.41 0l-3 3a1 1 0 0 0 0 1.4l3 3a1 1 0 1 0 1.42-1.4L22.45 20l2.27-2.3a1 1 0 0 0-.02-1.41zM40.71 16.3a1 1 0 1 0-1.42 1.4l2.26 2.3-2.27 2.3a1 1 0 1 0 1.42 1.4l3-3a1 1 0 0 0 0-1.4z" fill="#23292f"></path><path d="M53 8H11a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h7.59l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71h13.18l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71H53a3 3 0 0 0 3-3V11a3 3 0 0 0-3-3zm1 21a1 1 0 0 1-1 1h-8a1 1 0 0 0-.71.29L42 32.59l-2.29-2.29A1 1 0 0 0 39 30H25a1 1 0 0 0-.71.29L22 32.59l-2.29-2.29A1 1 0 0 0 19 30h-8a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h42a1 1 0 0 1 1 1z" fill="#23292f"></path></svg>
  Title
  </div> 
 </div>

How is works toggleClass with SVG?

2 Answers2