CSS Hidden Div (3)

Fig 1:

Fig 2:
Here is an example of collapsing and hiding a div that I like to use a lot. It uses a few gifs that are seen across many sites and applications, and its a great effect that suits a variety of needs, such as FAQ's or instructions.
Like the example CSS Hidden Div (2), we begin with a default displayed div, with a hidden div below that. However, to create the above effect, everything is contained in an outer div that, when collapsed(again default) has a white background (invisible), but when expanded, it creates a nice effect.
Fig 1 is the what the user sees when the page is loaded, while fig 2 is what is shown when you click the plus sign to expand.
Using a simple onclick javascript method, I just pass in the parameters to change the icon from + to -, and to show the 2 divs - 1 as a background, and 1 as the content to reveal. At the bottom of this post I include the 3 gifs I use as the expand/collapse triggers.

Here is the html:
<div id="bkgd1" class="faqs">
<div class="faqicon"><img src="images/icon_expand.gif" id="toggle_icon1" name="toggle_icon1" width="11" height="11" border="0" onclick="toggleDisplay('faq1','bkgd1','toggle_icon1');" /></div>
<div class="faqcontent">
<div class="faqquestion">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</div>
<!-- COLLAPSABLE AREA DEFINED HERE WITH DIV TAG -->
<div id="faq1" class="faqanswer"> --Latin Text--
<div class="faqbottom"><img src="images/icon_collapse2.gif" onclick="toggleDisplay('faq1','bkgd1','toggle_icon1');" /></div>
</div>
</div>
<br clear="all" />
</div>
Here is the css:
.faqs {padding:10px;background-color:#ffffff;margin-bottom:3px;}
.faqicon {float:left;padding:3px 10px 0 0;}
.faqcontent {float:left;width:750px;}
.faqquestion {font-size:14px;color:#395f97; font-weight:bold;}
.faqanswer {display:none;padding-top: 10px;}
.faqbottom {float:right;padding-top:10px;}
Here is the js:
function toggleDisplay(a,b,c) {
if (document.getElementById(a).style.display=='none' || document.getElementById(a).style.display=='' ) {
document.getElementById(a).style.display='block';
document.getElementById(b).style.backgroundColor='#f5f5f5';
document.getElementById(c).src='images/icon_collapse.gif';
} else {
document.getElementById(a).style.display='none';
document.getElementById(b).style.backgroundColor='#ffffff';
document.getElementById(c).src='images/icon_expand.gif';
}
}