?
Solved

Put visible and hidden box's

Posted on 2009-02-16
6
Medium Priority
?
553 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

0
Comment
Question by:Pedro Chagas
  • 3
  • 2
6 Comments
 
LVL 21

Expert Comment

by:silemone
ID: 23653046
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>
0
 
LVL 21

Expert Comment

by:silemone
ID: 23653170
<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>
0
 
LVL 16

Accepted Solution

by:
sunithnair earned 2000 total points
ID: 23653259
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

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 3

Author Comment

by:Pedro Chagas
ID: 23653273
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

0
 
LVL 3

Author Closing Comment

by:Pedro Chagas
ID: 31547473
an excellent solution and with a few lines
0
 
LVL 21

Expert Comment

by:silemone
ID: 23653362
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

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question