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:

Popular posts from this blog