title: jQuery animation glitches out
body: <p>Im trying to make a cool animation with jQuery, but my skills with jQuery isn't that great so I have to ask about my problem here since I can't figure out the problem myself. What Im trying to do is to make a order plan, but it's acting weird.</p>
  
  <p>Here's a gif of my problem: <a href="https://gyazo.com/0ebae3cc3eff811ea3ec411a638343cd" rel="nofollow noreferrer">https://gyazo.com/0ebae3cc3eff811ea3ec411a638343cd</a></p>
  
  <p>As you can see, if I select a "plan" after I've selected one from before, it glitches out and doesn't make sense. Here's my jerky JS/JQ code:</p>
  
  <pre><code>&lt;script&gt;
    $('.services').on('click', function(){
      var target = $(this).attr('dataid');
      $("#"+target).toggle('fast').siblings(".selected").hide();
    });
  
    $('.service').click(function(event) {
      $('.service').not(this).removeClass('selected');
      $(this).toggleClass('selected');
    });
  
    $('.package').click(function(event) {
      $('.package').not(this).removeClass('selected');
      $(this).toggleClass('selected');
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>A friend of mine suggested this fix: <a href="http://pastebin.com/YHxtpC1z" rel="nofollow noreferrer">http://pastebin.com/YHxtpC1z</a>.
  But it doesn't work either, and makes the page look even more glitched.</p>
  
  <p>Im not that good with JavaScript nor jQuery, but I am happy to learn! So please tell me what Im doing wrong, and correct me! I tried to keep the information minimal, but complete. So if I missed something, please tell me, so I can add it in. </p>
  
  <p>Thanks.</p>