Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Friday, July 25, 2014

Show and Hide div by javaScript

Show and Hide div by javaScript:


Show and hide div by javaScript is very easy, in web Development many time user want to use this type of concept. Some time we need hide one div and display second and then second hide, display first.

Show and Hide div by javaScript,

For Example In facebook home page we see update status and upload photo some time but when we click on upload photo then one div show and when click on update status then another div show. Here we give a small segment of code for understanding this concept. I think this is Useful for you.    

Code for hide/show div 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript hide table row</title>
<script>
    function show() {
        if (document.getElementById('photo').style.display == 'none') {
            document.getElementById('photo').style.display = 'block';
            document.getElementById('status').style.display = 'none';

        }
        return false;
    }
    function hide() {
        if (document.getElementById('photo').style.display == 'block') {
            document.getElementById('photo').style.display = 'none';
            document.getElementById('status').style.display = 'block';
        }
        return false;
    }  
</script>
</head>

<body>
<form id="form1" runat="server">
 <div id="opener"><a href="#" name="1" onclick="return show();">Photo</a></div>
 <div id="upbutton"><a href="#" onclick="return hide();">Status</a>



    <div id="photo" style="display:none;">
        <asp:TextBox ID="TxtStatus" runat="server"></asp:TextBox>
           </div>

         <div id="status" style="display:block;">status
           <asp:FileUpload ID="FileUpload1" runat="server" />

           </div>

    </div>
    
     </form>
</body>
</html>

Here we consider a Asp.net page in which we take two div:


<div id="photo" style="display:none;">
        <asp:TextBox ID="TxtStatus" runat="server"></asp:TextBox>
           </div>

         <div id="status" style="display:block;">status
           <asp:FileUpload ID="FileUpload1" runat="server" />

           </div>

And  javaScript function is :

<script>
    function show() {
        if (document.getElementById('photo').style.display == 'none') {
            document.getElementById('photo').style.display = 'block';
            document.getElementById('status').style.display = 'none';

        }
        return false;
    }
    function hide() {
        if (document.getElementById('photo').style.display == 'block') {
            document.getElementById('photo').style.display = 'none';
            document.getElementById('status').style.display = 'block';
        }
        return false;
    }  
</script>

Old Post:

Reference: