title: How to display one div and hide all others
body: <p>I want to display a div on each button click and also want to hide the other all divs how I can do it.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id=a style="display:none"&gt;1&lt;/diV&gt;
  &lt;div id=b style="display:none"&gt;2&lt;/diV&gt;
  &lt;div id=c style="display:none"&gt;3&lt;/diV&gt;
  &lt;div id=d style="display:none" &gt;4&lt;/diV&gt;
  
  &lt;input type=button value=1 id=w&gt;
  &lt;input type=button value=2 id=x&gt;
  &lt;input type=button value=3 id=y&gt;
  &lt;input type=button value=4 id=z&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$​('#w').live('click', function () {
      $('#a').css('display', 'block');
  });
  
  $('#x').live('click', function () {
      $('#b').css('display', 'block');
  });
  
  $('#y').live('click', function () {
      $('#c').css('display', 'block');
  });
  
  $('#z').live('click', function () {
      $('#d').css('display', 'block');
  });
  </code></pre>
  
  <p>​ <a href="http://jsfiddle.net/6UcDR/" rel="nofollow noreferrer">http://jsfiddle.net/6UcDR/</a></p>