I'm trying to replicate the effect of collapsing and expanding (hide/show) div tags on http://www.prophet.com/business/issues.html .

I can do the hide and show of the div tag no problem, however I can't for the life of me figure out how you get those arrows to change directions. I'd assume it was just a simple image replacement, but need a little help.

changing the className of the element so the background image changes is the quickest method to implement (no lag in loading the image)

I was thinking of doing a background image, but if you notice they still seem to let you click on the image to expand/collapse the div tag. Is there a way I can keep that functionality with the image while still hiding it in the background of a div?

Originally Posted by monkey

I was thinking of doing a background image, but if you notice they still seem to let you click on the image to expand/collapse the div tag. Is there a way I can keep that functionality with the image while still hiding it in the background of a div?

on the same javascript function that expand and collapse divs you can also change the image for the arrow.

as chrishirst said, you can use css for these easily.

Originally Posted by monkey

I was thinking of doing a background image, but if you notice they still seem to let you click on the image to expand/collapse the div tag. Is there a way I can keep that functionality with the image while still hiding it in the background of a div?

Yes! use the onclick event of the container

Got it all working. I ended up using some jQuery to add an accordian affect along with the arrows changing.

If you want to see it in action have a look at http://www.weissandmowery.com/about_you.php