Div toggler with Javascript

  


<!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>Div toggler</title>
    <script type="text/javascript">
function swap(targetId){
  if (document.getElementById){
        target = document.getElementById(targetId);
            if (target.style.display == "none"){
                target.style.display = "";
            } else {
                target.style.display = "none";
            }
        }
}    
    </script>
    <style type="text/css" media="Screen">
body {
  font: 12px Verdana;
}

#hiddenDiv {
  background-color: #aaaaaa;
  width: 200px;
}
</style>
</head>
<body>
    <div>
        <a href="#" title="Toggle section" onclick="swap('hiddenDiv');return false;">Toggle div!</a>
    </div>
    <div id="hiddenDiv" style="display: none;">
        <p>Hello!</p>
    </div>
</body>
</html>

Related examples in the same category

1.	'display' Example
2.	display: block
3.	display: inline
4.	display: none
5.	Disappearing an element by using the display property
6.	use display:none to prevent an element from being rendered.
7.	use display:inline to render an element inline.
8.	use display:block to render an element as a block
9.	display: inline-block
10.	display:list-item to render as list item
11.	use display:inline-block to render an inline element as a block nested in a line.
12.	Rendered as a table with rows and cells

Div toggler with Javascript : display « CSS « HTML / CSS

Related examples in the same category