Hi,
Let me start of by saying what a fantastic, helpful site this is.
Definitely the best resource out there.

That said, I hope there is someone out there who can help me find a solution for a site I am building.

Bascially I have several small image links that i call using css - the states change on hover.
This is working great.
What I now need to do is to hide text that is in a div and then display onmouseclick on the iCircle image.
Hopefully that made sense.

Sort of a combination of JS and CSS I think.
Can anyone help?

Thanks in advance rolleyes.gif

here is the 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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Display help</title>

<style type="text/css">
.leftContainerHeader
{
position: absolute;
left: 20px;
top: 110px;
width: 191px;
height: 20px;
color: #FFFFFF;
font-family: arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #777881;
}
#CircNav
{
list-style: none;
margin: 0;
padding: 0;
height:20px;
}

#CircNav li
{
float: left;
}

#liInformation a {
display: block;
background:url('/images/b_iCircle_off.gif') no-repeat;
margin:2px 0px 0px 7px;
height:16px;
width:16px;
}

/*hover states*/
#liInformation a:hover.rollover {
background:url('/images/b_iCircle_on.gif') no-repeat;
height:16px;
width:16px;
}

#CircNav li span {
display:none;
}
.leftContainerText
{
position:absolute;
left:16px;
top:110px;
width: 180px;
padding-left: 10px;
padding-right: 5px;
padding-top: 30px;
padding-bottom: 10px;
color: #ffffff;
font-family: verdana, Helvetica, sans-serif;
font-size: 10px;
background-color:#040a26;
filter:alpha(opacity=20);
-moz-opacity: 0.2;
opacity: 0.2;
z-index:2;
}
</style>
</head>

<body background="images/bwPhotos/UpgradeBW_lrg.jpg" style="z-index:-1;">

<div class="leftContainerHeader" style="z-index:10000;">
<ul id="CircNav">
<li id="liInformation"><a href="" class="rollover"><span>Information</span></a></li>
</ul>
</div>

<div class="leftContainerText">
Text that I want to hide until user click "Information" icon and then it will display
</div>

</body>
</html>