title: Toggle multiple classes
body: <p>I'm stuck with a menu I'd love to add to my website.
  I have branched my work in:</p>
  <ol>
  <li>Commercial</li>
  <li>Fashion</li>
  <li>Music</li>
  <li>Portrait</li>
  </ol>
  <p>So I have a menu like this one above.
  When I click on one section, let's say &quot;Commercial&quot; I want all the others to be display:none.</p>
  <p>Have a look at this FIDDLE: <a href="http://jsfiddle.net/bfevLsj2/8/" rel="nofollow noreferrer">http://jsfiddle.net/bfevLsj2/8/</a></p>
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
      $(&quot;#commercial&quot;).click(function() {
          $(&quot;.commercial&quot;).toggleClass(&quot;show&quot;);
          $(&quot;.fashion&quot;).toggleClass(&quot;hid&quot;);
          $(&quot;.music&quot;).toggleClass(&quot;hid&quot;);
          $(&quot;.portrait&quot;).toggleClass(&quot;hid&quot;);
      });
  });
  </code></pre>