title: jQuery toggle with SVG
body: <p>I'm using a lot show/hide or toggle method with jQuery.</p>
  
  <p>Now I'm struggling with SVG map.</p>
  
  <p>So far I've tried like these examples:</p>
  
  <pre><code>    $(".runs-toggle").click(function(){
        $("#Snow_mashine").toggle();
      });
  
  
      $('.runs-toggle').click(function(){
          $("#Snow_mashine").toggleClass('hidden');
      }); 
  </code></pre>
  
  <p>These two examples doesn't work.</p>
  
  <p>.runs-toggle is a toggle button, so on first click, the #Snow_mashine (the object from the map) has to become hidden and after clicking again it will show #Snow_machine.</p>
  
  <p>When I'm using like this:</p>
  
  <pre><code>$(".runs-toggle").click(function(){
    $("#Snow_mashine").hide();
  });
  </code></pre>
  
  <p>It hides the element, but if I use .show() it doesn't shows the element.</p>
  
  <p>I've read about instead of using .addClass(), the .attr() function is working with SVG, but I don't know how to achieve the toggle effect.</p>
  
  <pre><code>        $('.runs-toggle').click(function(){
             $("#Snow_mashine").attr("class","hidden");
          }); 
  </code></pre>
  
  <p>It's adding hidden class to the element and when that class has display:none with CSS, it works great, but how do I show the element after second click?</p>