title: Show one div, hide all others on click
body: <p>I have a simple image/video gallery that I want to animate with jQuery. All I want to be able to do is, when someone clicks a link the <code>.big</code> div with the same ID is set to <code>display:block; opacity:1</code> and all the other divs are set to <code>display:none; opacity:0</code></p>
  
  <p>This is the markup for my gallery;</p>
  
  <pre><code>&lt;div id="gallery"&gt;
  
      &lt;div class="main"&gt;
  
          &lt;div id="big-1" class="big"&gt;&lt;!-- image / video here --&gt;&lt;/div&gt;
          &lt;div id="big-2" class="big"&gt;&lt;!-- image / video here --&gt;&lt;/div&gt;
          &lt;div id="big-3" class="big"&gt;&lt;!-- image / video here --&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="thumbnails"&gt;
  
          &lt;a id="1" href="#"&gt;&lt;img src="images/thumb1.jpg" alt="#"/&gt;&lt;/a&gt;
          &lt;a id="2" href="#"&gt;&lt;img src="images/thumb1.jpg" alt="#"/&gt;&lt;/a&gt;
          &lt;a id="3" href="#"&gt;&lt;img src="images/thumb1.jpg" alt="#"/&gt;&lt;/a&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>By default all the <code>.big</code> divs are set to <code>display:none; opacity:0</code> except the first one.</p>