Javascript with CSS

[treeleaf20]

All,
I have the following bit of CSS:

ul li{background:url(images/marker.jpg) top left no-repeat; background-position:0 3px; margin:0; padding-left:13px; }

So basically on my page whenever there is a bullet it displays this marker. I put in the following code to make the bullet become clickable:

<li onclick="javascript:showdesc('This is info about bulk delivery', 'bulk');">Bulk Delivery</li><div id="bulk"></div>

I then have the following javascript to handle that:

<script type="text/javascript">
function showdesc(desc, type){
if(type=="bulk"){
document.getElementById("bulk").innerHTML = desc;
}
}
</script>

Is there a way to incorporate CSS into the JS that will allow me to use a different image (down arrow) and make that clickable to then make the <div id="bulk"></div> not have the desc in it anymore?

Thanks in advance!

[apeg]

i dont think im understanding you fully, here is what i got:
1. when clicked you want the bullet to turn into a down arrow
2. #bulk's html gets set to the passed string
3. if user click the "new" arrow, #bulk gets set back to blank and the arrow returns to a bullet

Assuming I'm on the right track, here is what you need to do:
1. change the bullet to an arrow in your click function

document.getElementById("bulk").style.backgroundImage = 'SET TO YOU ARROW LOCATION'

2. now you can cheat and use that arrow as your "flag" to see if the bullet has been clicked

if ( document.getElementById("bulk").style.backgroundImage== 'your arrow image location') {
     if we made it here that means the given bullet has been clicked so we revert back
     in here return your arrow back into a bullet and set the html of bulk to "-nothing-"
} else {
     run the rest of your function like normal
}

the only problem you are going to run into is when a user clicks one bullet it will turn into an arrow... but if instead of clicking the arrow again (to turn it back) the user click another bullet then the arrow will remain on the 'old-no longer active' clicked bullet. The solution would be to reset you bullet list on click. meaning your click function runs through ALL the bullets and reverts them back to bullets if they are arrows. I know with jQuery the addClass / removeClass would do all the work for me, but im not sure with regular JS.

-aPeg