We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

Put visible and hidden box's

Medium Priority
563 Views
Last Modified: 2013-11-19
Hi, I create a simple code for understand how work with hidden and visible box's.
I create 4 boxs, 1 to 4, and box 2 and 4 when the page reload has hidden.
Box 2 and 4, just visible if we click in box 1 and 3, in 'view B2' and 'view B4'.
If customer put visible one of hidden boxs, and if he want to hidden the box again, they click in 'close B2' or 'close B4' inside box 2 and 4.
You can see the example in: http://bastidores.tagspedia.com/teste_css.php

What changes I have to do in my code for doing what I said?

Regards, JC
<!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>
<style type="text/css" media="screen">
#box1{
background:#666666;
font:Arial, Helvetica, sans-serif;
visibility:inherit;
}
 
#box2{
background:yellow;
font:Arial, Helvetica, sans-serif;
width:0px;
height:0px;
visibility:hidden;
}
 
#box3{
background:#666666;
font:Arial, Helvetica, sans-serif;
}
 
#box4{
background:yellow;
font:Arial, Helvetica, sans-serif;
width:0px;
height:0px;
visibility:hidden;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
<div id="box1">view B2</div>
<div id="box2">This is the content of box 2<br />
close B2 </div>
<div id="box3">view B4</div>
<div id="box4">This is the content of box 4 <br />
close B4</div>
</body>
</html>

Open in new window

Comment
Watch Question

Commented:
1)  you have to put links around 'view B2', 'view  B4'

that way you can have an onclick event that will call the javascript...

<body>
<div id="box1"><a href  onclick="toggleDiv('B2');return false;">view B2</div>
<div id="box2">This is the content of box 2<br />
close B2 </div>
<div id="box3"><a href  onclick="toggleDiv('B4');return false;">view B4</div>
<div id="box4">This is the content of box 4 <br />
close B4</div>
</body>

Commented:
<script type="text/javascript">

function toggleDiv(strSender)
{
     if (strSender != "")
     {
         If (strSender = "B1")
        {
             
              var elem = document.getElementById("Box2");
              if (elem != 'undefined')
             {
                       if (elem.style.display = "none")
                      {
                                elem.style.display = "block";
                      }                                              
              }
         }
         If (strSender = "B3")
        {
             var elem = document.getElementById("Box4");
              if (elem != 'undefined')
             {
                       if (elem.style.display = "none")
                      {
                                elem.style.display = "block";
                      }                                              
              }
         }

           If (strSender = "B2")
         {
              var elem = document.getElementById("Box2");
              if (elem != 'undefined')
             {
                       if (elem.style.display = "block")
                      {
                                elem.style.display = "none";
                      }                                              
              }
         }
           If (strSender = "B4")
        {
             var elem = document.getElementById("Box4");
              if (elem != 'undefined')
             {
                       if (elem.style.display = "block")
                      {
                                elem.style.display = "none";
                      }                                              
              }
         }

     }
}
</script>


<body>
<div id="box1" onclick="toggleDiv('B1');return false;">view B2</div>
<div id="box2" onclick="toggleDiv('B2');return false;">This is the content of box 2<br />
close B2 </div>
<div id="box3" onclick="toggleDiv('B3');return false;">view B4</div>
<div id="box4" onclick="toggleDiv('B4');return false;">This is the content of box 4 <br />
close B4</div>
</body>
Try this
<!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>
<style type="text/css" media="screen">
#box1{
background:#666666;
font:Arial, Helvetica, sans-serif;
cursor:hand; cursor:pointer;
}
 
#box2{
background:yellow;
font:Arial, Helvetica, sans-serif;
display:none;
}
 
#box3{
background:#666666;
font:Arial, Helvetica, sans-serif;
cursor:hand; cursor:pointer;
}
 
#box4{
background:yellow;
font:Arial, Helvetica, sans-serif;
display:none;
}
</style>
<script language='javascript'>
function ShowDiv(divID)
{
  document.getElementById(divID).style.display="block";
}
function HideDiv(divID)
{
  document.getElementById(divID).style.display="none";
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
<div id="box1" onclick="ShowDiv('box2');">view B2</div>
<div id="box2">This is the content of box 2<br />
<p style="cursor:hand; cursor:pointer;" onclick="HideDiv('box2');">close B2</p> </div>
<div id="box3" onclick="ShowDiv('box4');">view B4</div>
<div id="box4">This is the content of box 4 <br />
<p style="cursor:hand; cursor:pointer;" onclick="HideDiv('box4');">close B4</p></div>
</body>
</html>

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Pedro ChagasWebmaster

Author

Commented:
That don't work. I try first with your code and don't work. I try to put a link in view B2 and 4, but don't work too.
Don't forget, 'close B2' and 'close B4' hidden the box if the box are visible.

Regards, JC
<!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>
<script type="text/javascript">
 
function toggleDiv(strSender)
{
     if (strSender != "")
     {
         If (strSender = "B1")
        {
             
              var elem = document.getElementById("Box2");
              if (elem != 'undefined')
             {
                       if (elem.style.display = "none")
                      {
                                elem.style.display = "block";
                      }                                              
              }
         }
         If (strSender = "B3")
        {
             var elem = document.getElementById("Box4");
              if (elem != 'undefined')
             {
                       if (elem.style.display = "none")
                      {
                                elem.style.display = "block";
                      }                                              
              }
         }
 
           If (strSender = "B2")
         {
              var elem = document.getElementById("Box2");
              if (elem != 'undefined')
             {
                       if (elem.style.display = "block")
                      {
                                elem.style.display = "none";
                      }                                              
              }
         }
           If (strSender = "B4")
        {
             var elem = document.getElementById("Box4");
              if (elem != 'undefined')
             {
                       if (elem.style.display = "block")
                      {
                                elem.style.display = "none";
                      }                                              
              }
         }
 
     }
}
</script>
<style type="text/css" media="screen">
#box1{
background:#666666;
font:Arial, Helvetica, sans-serif;
visibility:inherit;
}
 
#box2{
background:yellow;
font:Arial, Helvetica, sans-serif;
width:0px;
height:0px;
visibility:hidden;
}
 
#box3{
background:#666666;
font:Arial, Helvetica, sans-serif;
}
 
#box4{
background:yellow;
font:Arial, Helvetica, sans-serif;
width:0px;
height:0px;
visibility:hidden;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
 
<body>
<div id="box1" onclick="toggleDiv('B1');return false;"><a href="#">view B2</a></div>
<div id="box2" onclick="toggleDiv('B2');return false;">This is the content of box 2<br />
close B2 </div>
<div id="box3" onclick="toggleDiv('B3');return false;"><a href="#">view B4</a></div>
<div id="box4" onclick="toggleDiv('B4');return false;">This is the content of box 4 <br />
close B4</div>
</body>
</html>

Open in new window

Pedro ChagasWebmaster

Author

Commented:
an excellent solution and with a few lines

Commented:
your styles may need to be updated...

2nd, visible is not what you usually use...however if you do, change my version which uses display to visibility...
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 
<!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 runat="server">
    <title>Untitled Page</title>
 
 
 
 
<style type="text/css" media="screen">
#box1{
background:#666666;
font:Arial, Helvetica, sans-serif;
display:visible;
}
 
#box2{
background:yellow;
font:Arial, Helvetica, sans-serif;
width:0px;
height:0px;
display:none;
}
 
#box3{
background:#666666;
font:Arial, Helvetica, sans-serif;
}
 
#box4{
background:yellow;
font:Arial, Helvetica, sans-serif;
width:0px;
height:0px;
display:none;
}
</style>
 
 
<script type="text/javascript">
 
function toggleDiv(strSender)
{
     
     if (strSender != "")
     {
  
         if (strSender == "B1")
        {
            
             
              var elem = document.getElementById("box2");
              if (elem != 'undefined')
             {
                                      
                                elem.style.display = "block";
             
              }
         }
         if (strSender == "B3")
        {
             var elem = document.getElementById("box4");
              if (elem != 'undefined')
             {
                                elem.style.display = "block";
             
              }
         }
 
           if (strSender == "B2")
         {
              var elem = document.getElementById("box2");
              if (elem != 'undefined')
             {
                                elem.style.display = "none";
                 
              }
         }
           if (strSender == "B4")
        {
             var elem = document.getElementById("box4");
              if (elem != 'undefined')
             {
                  
                                elem.style.display = "none";
                  
              }
         }
 
     }
}
</script>
 
</head>
 
<body>
    <form id="form1" runat="server">
   <div id="box1" onclick="toggleDiv('B1');return false;">view B2</div>
<div id="box2" onclick="toggleDiv('B2');return false;">This is the content of box 2<br />
close B2 </div>
<div id="box3" onclick="toggleDiv('B3');return false;">view B4</div>
<div id="box4" onclick="toggleDiv('B4');return false;">This is the content of box 4 <br />
close B4</div>
    </form>
</body>
</html>

Open in new window

Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.