WordPress site - Divi Theme/Framework. I'm trying to figure out what is the best way to trigger an image change (6 images total, one per tab) as the user selects different parts of the accordion. But the catch is the images are not inside the accordion, they are in the next column. At first, I thought I could do this with just CSS and the ID's but I was running into issues. I know this can also be solved with JS but I am not as strong in JS as HTML/CSS these days.
Please let me know what you think is the best method to achieve something like this. Cheers!
Each Section of the Accordion has its own class:
et_pb_accordion_0
et_pb_accordion_item_0
et_pb_accordion_item_1
et_pb_accordion_item_2
et_pb_accordion_item_3
et_pb_accordion_item_4
et_pb_accordion_item_5
Open and Closed Class: Open: et_pb_toggle_open Close: et_pb_toggle_close
I have added an ID to the Accordion of '#slidepick'
Here is the Output HTML from Divi for the first two sections of the Accordion:
<div id="slidepick" class="et_pb_module et_pb_accordion et_pb_accordion_0">
<div class="et_pb_toggle et_pb_module et_pb_accordion_item et_pb_accordion_item_0 et_pb_toggle_close">
<h5 class="et_pb_toggle_title">Sample Content 1</h5>
<div class="et_pb_toggle_content clearfix" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div><div class="et_pb_toggle et_pb_module et_pb_accordion_item et_pb_accordion_item_1 et_pb_toggle_open">
<h5 class="et_pb_toggle_title">Sample Content 2</h5>
<div class="et_pb_toggle_content clearfix" style="display: block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
