SlideToggle - configuration in Open and Closed - jQuery

I will present the idea that I want to do on my site and then show what I have already done and what is working correctly and then I will present the problem that I can not solve. If I'm not clear somewhere, I'm going to be super happy to clarify so that understanding gets better.

IDEA:
I am doing a screen with information on types of consulting, for that I made 6 cards (Rectangle with Icone + name) with the titles that needed. What will contain in this card interaction:

Hover:
- Color change in card icon and title;

Event Click :
- Performs Ajax request and displays response; - Color change in card icon and title;

ALREADY DEVELOPED:
I already managed to do the part of the hover, of course and Event Click with Javascript, as follows:

This is HTML :

                <div class="col-lg-4 col-md-6 mt-5" ">
                    <a data-consult-id="1">
                        <div class="text-center element">
                            <div style="margin-bottom: 25px;">
                                <i class="ti-package ti-icone"></i>
                            </div>
                            <h4>
                                RH
                            </h4>
                        </div> <!-- feature -->
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 mt-5">
                    <a data-consult-id="2">
                        <div class="text-center element">
                            <div style="margin-bottom: 25px;">
                                <i class="ti-headphone-alt ti-icone"></i>
                            </div>
                            <h4>
                                Processos Industriais
                            </h4>
                        </div> <!-- feature -->
                    </a>
                </div>

CSS is:

.element {
        box-shadow: 0 8px 50px -6px rgba(84,84,120,.26);
        padding: 40px 20px 20px;
        position: relative;
        background: #fff;
        cursor: pointer;
    }
    .element h4 {
        color: #3c9890;
        font-size: 20px
    }
    .element:hover div i{
        background: rebeccapurple !important;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }
    .element:hover h4{
        color: #9e6bd2 !important;
        transition: all .5s ease-in-out;
    }

    .ti-icone {
        background: #35b1a6;
        width: 80px;
        height: 80px;
        display: inline-block;
        line-height: 80px;
        text-align: center;
        color: #fff;
        font-size: 28px;
        border-radius: 50%;
    }

And here's Javascript :

$(document).on('click', 'a[data-consult-id]', function () {
        let consult_id = $(this).attr("data-consult-id");
        var obj = $(this);
        let response = $(".response-content");
        setTimeout(function(){
            $.ajax({
                url: "response.php?consult_id=" + consult_id,
                type: 'GET',
                success: function (data) {
                    $(response).slideToggle('fast', function () {
                        $('a[data-consult-id] .element div').children('i').css("background-color", "");
                        $('.element div', obj).children('i').toggleClass('actived');
                        $('.element', obj).children('h4').toggleClass('text-actived');
                    }).html(data);
                }
            });
        }, 200);
    });

NOTE: I apologize for the detail that may sound annoying, but if I do too simple they ignore the question and can give negative, sla rsrs.

PROBLEM:
Now my problem is as follows: If I click the RH card, the request will be made and it will return the data to the response , okay and with that I added a SlideToggle for open and close and also along with that I put a function so that when it does, add it in the i > and the < h4> class .actived / .text-actived , what they do can be seen below:

.actived {
   background-color: #663399 !important;
}
.text-actived {
   color: #9e6bd2 !important;
}

So, having this card active, I have it exactly as I want, but if I have that card open I click on another card, for example Industrial Processes , SlideToggle () is disabled, but the .actived / .text-actived classes are added in the < i > and the < h4 > .

My request is that someone help me understand how I can do this functionality so that when I click on another card, the old one is disabled and the AJAX of the new card is opened and displayed and with that, the color of the " i "and" h4 "of the old one are also disabled and activated in the new one.

Well, that was it. As I did in my previous question, I'm going to put the link from the site that I'm developing this functionality to maybe you'll see better.
link

Any questions, please comment and I will respond as soon as possible. I'm also testing some ways to fix this.

Thank you all and may the force be ....