Expandable FAQ - change of font and size

[briggers84]

Hi

I'm using the code below for an expandable FAQ but I want to change the font of the Answer to a slightly smaller size and to something more standard like 'Arial'. I just feel this will make it 'cleaner' when there are lots of FAQs listed together.

I'm new to code and am trying to teach myself but this has stumped me. Any suggestions on how I can adapt what I already have or where I have gone wrong would be much appreciated:

<p> <script type="text/javascript"><!--
function toggleMe(a){
var e=document.getElementById(a);
var i = document.getElementById(a + '_image');
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
i.src = 'http://findicons.com/files/icons/2581/metro_icons/48/minus.png';
} else {
e.style.display="none"
i.src = 'http://findicons.com/files/icons/974/glyphish/15/plus.png';
}
return false;
}
// --></script> </p> <p><a style="cursor:pointer;" onclick="return toggleMe('para1')"><span style="font-size: small;"><span style="font-size: x-small;"><span style="font-size: small;"><img id="para1_image" style="border:0;margin-right:5px;vertical-align:middle;" src="http://findicons.com/files/icons/974/glyphish/15/plus.png" alt="" width="10" height="10" /> Test Question </span></span></span></a></p> <div id="para1" style="display:none;">Test Answer</div> <p><a style="cursor:pointer;" onclick="return toggleMe('para2')"><span style="font-size: small;"><span style="font-size: x-small;"><span style="font-size: small;"><img id="para2_image" style="border:0;margin-right:5px;vertical-align:middle;" src="http://findicons.com/files/icons/974/glyphish/15/plus.png" alt="" width="10" height="10" /> Test Question number Two. </span></span></span></a></p> <div id="para2" style="display:none;">Test Answer number 2</div>