Is it possible to change multiple div elements' classes/properties with one button click?

Question

I am looking to create my own toggle/accordion but it needs a background image that covers the module when closed with the H1 positioned in the middle over the image and a toggle button to the right.

The image also has to be faded when closed. I was thinking I could achieve this if I could have a divider positioned absolutely to the bottom that covered 100& of the container when closed. With the container limited to 90px when closed and then expanding to 270px when open. I would then have the divider come down to 40% when the button is pressed and turn from a transparent blue to solid white to be the background for the text. This would allow the image to be bigger and positioned above the text. I would have the body text transparent until the button was clicked too and then to black on click. The heading would also need to change from white to black on click.

Is it possible to get this all done in one click? I have no clue where to start except it would need a jquery probably? I need to do it for five toggles on the page.

What I need to do - just a design not coded sorry

This is the html

<div class="et_pb_column et_pb_column_1_2 et_pb_column_19 plant-toggle-container  et_pb_css_mix_blend_mode_passthrough et-last-child">
                
                <div class="et_pb_module et_pb_image et_pb_image_6 et_pb_image_sticky">
                
                <span class="et_pb_image_wrap "><img decoding="async" width="247" height="247" src="https://www.sinus-medication.com.au/sinupret-ns-stag/wp-content/uploads/2024/01/Vervain-herb-Active.png" alt="" title="Vervain herb Active" class="wp-image-234943"></span>
            </div><div class="et_pb_module et_pb_divider et_pb_divider_4 plant_div et_pb_divider_position_ et_pb_space"><div class="et_pb_divider_internal"></div></div><div class="et_pb_module et_pb_text et_pb_text_13  et_pb_text_align_left et_pb_bg_layout_light">
                
                <div class="et_pb_text_inner"><h3>Gentian Root</h3>
<p><plant-blurb>Stimulates the immune system, destroys fungi, anti-inflammatory.</plant-blurb></p></div>
            </div><div class="et_pb_module et_pb_text et_pb_text_14 plant_toggle_button  et_pb_text_align_left et_pb_bg_layout_light">
                
                <div class="et_pb_text_inner"><p><i class="arrow down"></i></p></div>
            </div>
            </div>

I am unsure but saw this code that worked well

This is a jsfiddle I found that looked like it could be helpful but not sure about using across multiple divs..