CSS Forum

**philmetz** · 11-26-2009, 04:46 PM

I have the following code:

Code:

<!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>
<title>(Type a title for your page here)</title>
<style type="text/css">
div.one {
position: absolute;
left: 100px;
top: 400px;
background-color: #f1f1f1;
width: 180px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}

div.two {
position: absolute;
left: 100px;
top: 200px;
background-color: #f1f1f1;
width: 180px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

</head>
<body >

<input type=button name=type value='Show Layer1' onclick="setVisibility('sub1', 'inline');";>
<input type=button name=type value='show Layer2' onclick="setVisibility('sub2', 'inline');";> 

<div class="one" id="sub1">Message Box</div>
<div class="two" id="sub2">Message Box 2</div>
</body>
</html>

I want to be able to display different divs depending on the button i press. How do i define 2 different types of divs like i did above and refer to them for each button?

**chrishirst** · 11-26-2009, 05:08 PM

Use the ID attribute.

**philmetz** · 11-26-2009, 05:23 PM

I tried that but dont think its right. How do i give each div an id in the css stylesheet?

**chrishirst** · 11-26-2009, 05:30 PM

Code:

#elementid {
        property:value;
}