Div toggler with Javascript : display : Box Model HTML CSS TUTORIALS

HTML CSS TUTORIALS » Box Model » display »

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>