Tuesday, May 14, 2013

Show and Hide text in ASP.NET page using JavaScript


Here JavaScript is used to Show and Hide text in ASP.NET. To do that use the below code. Replace the Sample Text inside the paragraph tag with the content u need to show hide.
JavaScript Code:
 <script type="text/javascript">  
   function ShowHide(ref) {  
     var txtArea = document.getElementById(ref);  
     var xtxtArea = document.getElementById("x" + ref);  
     if (txtArea.style.display == 'none')   
     {  
       xtxtArea.innerHTML = '<b><u>Hide Text</u></b>';  
       txtArea.style.display = '';  
     }  
     else  
     {  
       xtxtArea.innerHTML = '<b><u>Show Text</u></b>';  
       txtArea.style.display = 'none';  
     }  
   }  
 </script>  

Design Code:
 <a href="#_link" id="A1" onclick="ShowHide('txtArea');"><b><u>Show Text</u></b></a>  
 <div id="Div1" style="display: none">  
   <p>  
     Sample Text....Sample Text....Sample Text....Sample Text....  
     Sample Text....Sample Text....Sample Text....Sample Text....  
   </p>  
 </div>