WebSentry.ca

When CSS started becoming more and more supported by the Internet browser community, designers soon realized that they could make sites much more dynamic than ever before. So, to get started, let’s write some basic HTML code for the div, as well as set the default display CSS  style of  ‘none’ (starts with the div hidden).

{code type=html}<div id=”myDiv” style=”style: none;”>
Hello World!
</div>
<input type=”button” value=”Toggle” onclick=”doToggle(‘myDiv’);”/>{/code}

From here we can use either regular javascript (as seen in this example), or the jQuery libaries (http://jquery.com).

Using Javascript:

{code type=javascript}<script type=”text/javascript” language=”JavaScript”>
function doToggle(obj) {
var elem = document.getElementById(obj);
if (elem.style.display != ‘none’) {
elem.style.display = ‘none’;
} else {
elem.style.display = ”;
}
}
</script>{/code}