title: jquery siblings how to remove class?
body: <p>I have the following jQuery:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('.showFood').on('click', function () {
      $(this).addClass('selected').siblings().removeClass('selected');
      $('.targetFood').hide();
      $('#food' + $(this).data('target')).show(function() {
          $('#food' + $(this).data('target')).toggle("slide");
      });
  });
  $('.showFood').first().click();
  &lt;/script&gt;
  </code></pre>
  
  <p>The following HTML:</p>
  
  <pre><code>&lt;ul class="menus-nav"&gt;
  &lt;li&gt;&lt;a href="#menu1" class="showFood" data-target="1"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#menu2" class="showFood" data-target="2"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#menu3" class="showFood" data-target="3"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="food1" class="targetFood"&gt;
  &lt;p&gt;Items from menu 1&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="food2" class="targetFood"&gt;
  &lt;p&gt;Items from menu 2&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="food3" class="targetFood"&gt;
  &lt;p&gt;Items from menu 3&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Everything works fine except when you navigate through the menus it won't remove the selected class and once you click all menus they all have the class selected.</p>
  
  <p>I don't have a great experience in javascript or jquery, any chance some of you guys could give me some help please?</p>
  
  <p>Note: the html has been reduced for demo purpose.</p>
  
  <p><a href="http://jsbin.com/aQUFota/2/edit" rel="noreferrer">Fiddle</a></p>