Show Hide Div Problem

[yakabod]

Here is my FAQ: http://www.caraudioclips.com/support.php

This is the script I am using:  http://www.linkstraffic.net/programming/javascript/showhide.php

 

How do I make this script simple and user friendly?  For every question I create I need a new code to add on the css?  My code looks so messy that I think there is an error on IE but works fine on firefox and opera

 

<script type="text/javascript">
<!--
function ShowHide(id) {
obj = document.getElementsByTagName("div");
if (obj[id].style.visibility == 'visible'){
obj[id].style.visibility = 'hidden';
obj[id].style.height = '0px';
}
else {
obj[id].style.visibility = 'visible';
obj[id].style.height = 'auto';
}
}
//-->
</script>
<!-- Set the box as invisible at first -->
<style type="text/css">
#lay {
visibility:hidden;
color: #FFFFFF;
width:400px;
height:0px;
border:1px solid #5C99D9
}
#lay2 {
visibility:hidden;
color: #FFFFFF;
width:400px;
height:0px;
border:1px solid #5C99D9
}
#title {
color:#FFFFFF;
font-size:24px;
font-weight:bold;
text-decoration:underline;
}

#title2 {
color:#5C99D9;
font-size:18px;
}

a{
color:#FFFFFF;
text-decoration:underline; 
}

a:hover{
text-decoration:none;
color: #; 
}

a:visited{
color:#FFFFFF;
}
.style1 {color: #5C99D9}
</style>

<div align="center">
<br  />
	<div id="title"><b>Frequently Asked Questions</b>
  		</div><br />
				<div id="title2">General Questions</div>
				<span class="style1">+</span> <a href="javascript:ShowHide('lay')">How do I start uploading videos?</a><br />
					<div id="lay" align="center">You can start uploading videos once you register on CarAudioClips.com.  <a href="http://www.caraudioclips.com/login.php">Click here to Register</a>
					</div>
				<span class="style1">+</span> <a href="javascript:ShowHide('lay2')">Is it really free?</a><br />
					<div id="lay2" align="center"> Yes, in our BETA launch we are offering our services free. Our hope is to keep the service free. Please support Car Audio Clips and our advertisers, and click the ads you see on the site.
					</div>
</div>

[wildteen88]

Rather than give each answer a unquie id with the same css. Instead give each answer the same class name, eg: class="answer", you then setup a class in your css you want your awsers to be styled as.

 

Then assign a unquie id to each answer (do not apply any styling for this id in your css). That way you don't have duplicate the css for the answers.

[yakabod]

So how would I exactly do it?  Set my attributes for one block on the css. And then in my code just use id=? and it wouldnt matter what I call it?