Sunday, May 10, 2009

JavaScript: Toggle Visibility Script

<html><head>
<script language="JavaScript">
    function toggle(id) {
        var state = document.getElementById(id).style.display;
        if (state == 'none') {
        document.getElementById(id).style.display = 'block';
        } else {
        document.getElementById(id).style.display = 'none';
        }
    }
</script>
</head><body>
<a href="#" onclick="toggle('toggled'); return false;">Toggle</a>
<div id="toggled" style="background-color: yellow; border: 1px solid black; width: 200px; height: 100px; position: absolute;top: 100px; left: 100px;">
Can you see me now?</div>

<a href="#" onclick="toggle('toggled2'); return false;">Toggle2</a>
<div id="toggled2" style="background-color: yellow; border: 1px solid black; width: 200px; height: 100px; position: absolute;top: 350px; left: 350px;display:none">
Can you see me now 2?
</div></body></html>
Source: http://classes.design.ucla.edu/Fall06/161A/examples/javascript/toggle.html