change image color when reveal content-CodePudding

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:

jQuery(function($){
    var revealButtons = {
        '.rv_button_1-do': '.rv_element_1-do'
    
 
    };
    $.each(revealButtons, function(revealButton, revealElement) {
        $(revealButton).click(function(e){
            e.preventDefault();
            $(revealElement).slideToggle();
            $(revealButton).toggleClass('rotateicon img-color');
        });
    });
});

body:not(.et-fb) .rv_element-do { display: none; }
.img-color {
filter: grayscale(100%);
}
.rv_button_1-do{
background-color: blue; 
padding: 12px 20px; 
color: white;
width: 200px;
text-align: center; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img decoding="async" loading="lazy" src="https://media.npr.org/assets/img/2017/01/18/red-turtle_wide-03029731def2957b2fb69fb27e44c5c2e456f4a6-s800-c85.webp" width="80" height="165" alt="" >
<p>Example text</p>
<div >                                         
    <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 ><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.

CodePudding user response：

Instead of removing the .img-color class, you can just assign a new one that will overwrite the filter:

.img-revealed {
    filter: grayscale(0%) !important;
}

Just assign 'img-revealed' to the image in the callback like this:

$(revealButton).click(function(e){
    e.preventDefault();
    $(revealElement).slideToggle();
    $(revealButton).toggleClass('rotateicon img-color');
    $('img').toggleClass('img-revealed');
});