javascript interfering with CSS?

Will the following javascript:

function openDrawer(obj) {
			var el = document.getElementById(obj);
			if ( el.style.display != 'none' ) {
				el.style.display = 'none';
			}
			else {
				el.style.display = '';
			}
		}

Code (markup):

interfere with the following attempt at using the "Pixy method" (see wellstyled.com/css-nopreload-rollovers.html for explanation of Pixy method):

<div id="faq-content" class="clear_left">
	<h1>Frequently Asked Questions</h1>
	<p class="faq"><a onclick="openDrawer('faq_ans_1');">Who can join?</a></p>
	<div id="faq_ans_1" class="faq_ans" style="display:none;">
		<p>
		FAQ Answer content...
		</p>
	</div> <!-- END #faq_ans_1 -->

HTML:

where the following external CSS produces the Pixy method of swapping images (the image being one of those triangular arrows that indicate something can expand or collapse and changes colour upon hovering):

#faq-content a {
	background: #fff url(Images/faq_arrow.gif) no-repeat left top;
}

#faq-content a:hover {
	color: black;
	background-position: 0 -16px;
}

Code (markup):

The method above fails to display the arrow image in the background although it does effectively control the background colour. If I insert the background-image style directly into the <p class="faq"> tag above, it displays the image but if I insert it directly into the <a> tag (where I want it)then still nothing happens. I feel like the "onclick" javascript call in the <a> tag is interfering somehow but it doesn't really make sense that it would do so. My knowledge of javascript is close to nil so I have no idea for sure. I posted this in the CSS forum too just in case this isn't the appropriate forum for the question.