# Changing image on accordian click

**URL:** <https://community.wpbeaverbuilder.com/t/changing-image-on-accordian-click/12726>\
**Category:** Beaver Builder\
**Created:** [August 21, 2020, 2:57pm UTC](https://community.wpbeaverbuilder.com/t/changing-image-on-accordian-click/12726 "2020-08-21T14:57:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![maxhf](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/m/bbce88/32.png) [@maxhf](https://community.wpbeaverbuilder.com/u/maxhf)\
**Post date:** [August 21, 2020, 2:57pm UTC](https://community.wpbeaverbuilder.com/t/changing-image-on-accordian-click/12726/1 "2020-08-21T14:57:28Z")

</div>

I am working on a site that has an accordian with information about specific roof types, and I need an image on the right hand side to change according to each section of the accordian when click. Here is an image -

 ![118194668_1515159768666899_3048672037185666247_n](https://community.wpbeaverbuilder.com/uploads/default/original/2X/0/0023c7b8a1deaec0509177e92897c4d55f86045d.png)

I’ve been looking at jQuery, but I’m not sure how I load the new images and have the same margins etc.

Is there a plugin that does this, or has anyone done something similar with JS/jQuery?

---

<div class="post-metadata">

**Author:** ![evolvecreative](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/e/ad7895/32.png) [@evolvecreative](https://community.wpbeaverbuilder.com/u/evolvecreative)\
**Post date:** [May 29, 2025, 5:26pm UTC](https://community.wpbeaverbuilder.com/t/changing-image-on-accordian-click/12726/2 "2025-05-29T17:26:41Z")

</div>

Does anyone have a solution for this?