title: Show and hide <div>s with jQuery event
body: <p>There are several advanced jQuery plugins which filter <code>&lt;div&gt;</code>s by corresponding id or class. This is indeed based on a simple jQuery idea, but I am not sure how to implement it. Consider a menu to show/hide the content as</p>
  
  <pre><code>&lt;ul id="filters" class="menu" indicator="filter"&gt;
   &lt;li&gt;&lt;a href="#filter" indicator="*" class="selected"&gt;All&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#filter" indicator=".first"&gt;First&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#filter" indicator=".third"&gt;Third&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and we want to control the display of contents:</p>
  
  <pre><code>&lt;div class="box first"&gt;Something&lt;/div&gt;
  &lt;div class="box first third"&gt;Something&lt;/div&gt;
  &lt;div class="box third"&gt;Something&lt;/div&gt;
  </code></pre>
  
  <p>What is the simplest jQuery Javascript code to do so?</p>
  
  <p>By default, all <code>&lt;div&gt;</code>s are shown, when we click on a <code>&lt;li&gt;</code> from menu (e.g. FIRST), jQuery will filter the <code>&lt;div&gt;</code>s to only show <code>&lt;div&gt;</code>s in which the class is "first".</p>