title: How to display product description on particular div same page for different products based on product click?
body: <p>I want to do an e-commerce site. In the product page, we have a list of product images and on hovering link on product image we need to display different descriptions for different products. Here I'm attaching some code. This is applicable for one or two product. I  need to apply for many products.  Please help me</p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
  function hide(id){
  var element = document.getElementById(id); 
  element.style.display = "none";
  }
  function show(id){
  var element = document.getElementById(id); 
  element.style.display = "";
  }
  function toggle(id){
  var element = document.getElementById(id); 
  element.style.display = (element.style.display == "") ? "none" : "";
  }
  function showDetail(){show("view-details");hide("view-summary");}
  function showSummary(){show("view-summary");hide("view-details");} 
  &lt;/script&gt;
  
  &lt;a onclick="showDetail()" class="text" href="#"&gt;Mirror&lt;/a&gt; |
  &lt;a onclick="showSummary()" class="text" href="#"&gt;Trolley&lt;/a&gt;
  
  &lt;p&gt;
   &lt;div id="view-details" style="display:none;border:1px solid red;"&gt;
    im mirror
  &lt;/div&gt;
  
  &lt;div id="view-summary" style="display:none;border:1px solid blue;"&gt;I'm Trolley&lt;/div&gt;
  &lt;/p&gt;
  </code></pre>