title: toggle switch by adding and removing Class with Jquery
body: <p>I'm trying to make a toggle switch and I can not use toggleClass because with #bar1 I'm using SVG. With SVG I read that I have to use Attributes instead of addClass(). My idea is to click on a div to add a new class and remove the current class. The first click of the code works but I am unable to revert back to the original class with the second click. Any suggestions on what I could be doing wrong? </p>
  
  <pre><code>$(".hamburger-container").click(function() {
    $("#bar1").attr('class', 'bar1');
    $(this).addClass('toggle');
    $(this).removeClass('hamburger-container');
  });
  
  $(".toggle").click(function() {
    $("#bar1").removeAttr('class', 'bar1');
    $(this).addClass('hamburger-container');
    $(this).removeClass('toggle');
  });
  </code></pre>
  
  <p>The HTML</p>
  
  <pre><code>     &lt;div class ="pull-right hamburger-container"&gt;
  
                 &lt;svg enable-background="new 0 0 32 32" height="32px" id="hamburger" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;&lt;g id="Menu"&gt;&lt;path class ="bar" id="bar1" d="M1,7h30c0.552,0,1-0.448,1-1c0-0.552-0.448-1-1-1H1C0.448,5,0,5.448,0,6C0,6.552,0.448,7,1,7z" fill="#121313"/&gt;&lt;path class="bar" id="bar2" d="M31,15H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,15.448,31.552,15,31,15z" fill="#121313"/&gt;&lt;path class="bar" id="bar3" d="M31,25H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,25.448,31.552,25,31,25z" fill="#121313"/&gt;&lt;/g&gt;&lt;g/&gt;&lt;g/&gt;&lt;g/&gt;&lt;g/&gt;&lt;g/&gt;&lt;g/&gt;&lt;/svg&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>      .toggle {
       width: 50px;
       height: 30px;
       display: inline-block;
      position: relative;
      z-index: 1200;
      cursor:pointer;
      margin-right: 20px;
       margin-top: 10px;
       }
  
     .hamburger-container {
      width: 50px;
      height: 30px;
      display: inline-block;
       position: relative;
      z-index: 1020;
       cursor:pointer;
        margin-right: 20px;
       margin-top: 10px;
       }
  </code></pre>