Hi,

I am trying to do a FAQ section on a site. New to this stuff.

What I would like to do is:
1.Question
2.Answer (Question and part of an answer are visible)
3. A button for expanding/collapsing. I am trying to do a button that changes on hover,and when text is expanded image changes, then on hover it changes again and if I press I collapse it to the original image).

What I got so far is this:
Code:
<head>
<style type="text/css">
.divVisible {display:block;}
.divHidden {display:none;}
#test {background-color: red;}
</style>
<script language="javascript" type="text/javascript">
var divID = "MyDiv";
function CollapseExpand() {
var divObject = document.getElementById(divID);
var currentCssClass = divObject.className;
if (divObject.className == "divVisible")
divObject.className = "divHidden";
else
divObject.className = "divVisible";
}
function changeImage()
{
document.images["Button1"].src= "less.png";
return true;
}
function changeImageBack() 
{
 document.images["Button1"].src = "more.png";
 return true;
}
</script>
</head>
<body>
<div id="test">
<div>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
<div id="MyDiv" class="divHidden">
-	TEST TEST TEST TEST
-	TEST TEST TEST TEST
-	TEST TEST TEST TEST
-	TEST TEST TEST TEST
-	TEST TEST TEST TEST
</div>
</div>
<A href="#" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" input id="Button1" type="button" onClick="return CollapseExpand()" ><img
name="Button1" src="less.png" width="81" height="42" border="0"  
alt="javascript button"></A> 
</body>
</html>
I tried different stuff but couldn't connect 4 images. (more.png, morehover.png, less.png, lesshover.png).

I would appreciate any pointers.

Tnx.
G.