Question

I have a link in my datalist

<a href="#" onclick="showHideDesc(this); return false;"  class="prod_details">details</a>
             <table style="display: none; background-color:AntiqueWhite; border-color:Black;
                     direction:rtl;" class="MyTable">
                  <tr>    
                     <td>
                       <asp:Label ID="lblShowHide" runat="server" 
                        Text='<%#DataBinder.Eval(Container.DataItem,"Description")%>'></asp:Label>
                     </td> 
                  </tr>   
             </table>  

On click of the link I am displaying the assciated table related to the link by the below function:

    <script type="text/javascript" language="javascript">
  function showHideDesc(link)
   {
     var table = link.parentNode.getElementsByTagName("TABLE")[0];
       if (table.style.display == "none")
         {
           table.style.display = "";
           link.innerHTML = "details";
         }     
       else 
         {         
           table.style.display = "none";         
           link.innerHTML = "details";     
         } 
   }

 </script>

Till now it is working fine, but the issue arises that the description which I am showing is of 10-15 lines and the table is hiding because of the other records in the datalist. I need to show this on the top of every HTML.. some Pop up kind of stuff.

Please help

Answer 1

To display your table above other HTML content, you should use the z-index CSS attribute. This enables some kind of layering of your content.
Take a look at http://w3schools.com/css/css_positioning.asp for some more info