title: Showing and Hiding many divs on click using jquery
body: <p>I am trying to create a menu(no dropdown) using jquery. Please check some of my codes below.</p>
  
  <p>If I click on the link of Galaxy Tab I want to display the div where the value of class attribute is <code>galaxyTab</code>. Similarly if I click on the link of Iphone, I want to hide the previous div(galaxyTab) and display the div where the value of class attribute is <code>iphone</code>. Here's the <a href="http://jsfiddle.net/Wvjbr/3/" rel="nofollow">fiddle</a> of the following code</p>
  
  <pre><code>&lt;div id="productMenu"&gt;
    &lt;a href="galaxyTab" class="showproducts"&gt;Galaxy Tab&lt;/a&gt;
    &lt;a href="iphone" class="showproducts"&gt;Iphone&lt;/a&gt;
    &lt;a href="hpslate" class="showproducts"&gt;HP Slate&lt;/a&gt;
  &lt;/div&gt;
   Unlimited... like this
  
  &lt;div id="article"&gt;
  &lt;div id="products" class="galaxyTab" style=""&gt;Galaxy Tab&lt;/div&gt;
  &lt;div id="products" class="iphone" style="display:none"&gt;Iphone&lt;/div&gt;
  &lt;div id="products" class="hpslate" style="display:none"&gt;HPslate&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can achieve the above requirement by following code, but the problem is I have to fetch the menu names and other information from database and there will probably be around 15 menu items, so the following method is not feasible. Could you please show me an easy way to do this. </p>
  
  <p>Thanks in advance :)  </p>
  
  <pre><code>$('a.showproducts').click(function(){
          var a_href = '.'+ $(this).attr('href'); 
                      $('.galaxyTab').hide();
                       $('.iphone').hide();
                       $('.hpslate').hide();
  
                      $(a_href).show();
  
         return false
      });//.click function ends here
  </code></pre>