change image color when reveal content

I am working on a section where I need to give color to the image when revealing the content.

This is a example of the code:

    var revealButtons = {
        '.rv_button_1-do': '.rv_element_1-do'
    $.each(revealButtons, function(revealButton, revealElement) {
            $(revealButton).toggleClass('rotateicon img-color');
body:not(.et-fb) .rv_element-do { display: none; }
.img-color {
filter: grayscale(100%);
background-color: blue; 
padding: 12px 20px; 
color: white;
width: 200px;
text-align: center; 
<script src=""></script>
<img decoding="async" loading="lazy" src="" width="80" height="165" alt="" class="img-color">
<p>Example text</p>
<div class="rv_element-do rv_element_1-do">                                         
    <p>Helps to fund ten (10) Estuary pop-up outreach events, or one (1) water-quality testing location kit for an entire year, or a day of seagrass monitoring in the field. Included with this donation:</p></div>
 <div class="rv_button_1-do"><a>button reveal</a></div>

I tried to add a class at the moment of opening the content and remove the added filter, but I have not been successful.