Menu icon Foundation
Change image with accordion

I've created a basic site using Foundation and have added the accordion to it. I have an image beside the accordion and I would like the image to change when I toggle the sections of the accordion. How would I go about doing this?

accordion

I've created a basic site using Foundation and have added the accordion to it. I have an image beside the accordion and I would like the image to change when I toggle the sections of the accordion. How would I go about doing this?

Andrew Butler over 4 years ago

You could do it through CSS. When accordion section is visible, show image A in a separate div.

This link has more info: http://stackoverflow.com/questions/19106389/jquery-toggle-show-hide-with-image-plus-text

Sara Graybill over 4 years ago

That's perfect, thank you for your help!

Sara Graybill over 4 years ago

I took a look at this and I'm struggling to understand how to implement it. I'm just learning javascript and jquery so this is pretty new to me. Can you explain it a little more?

Rafi Benkual over 4 years ago

Jquery is really good for adding and removing classes. The example linked above basically would use the toggled state of the tab to add the class to an empty span.

The toggle event happens here: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.tab.js#L38