Slidetoggle - Open and Closed Configuration - jQuery

Question

I will present the idea that I want to do on my website and then I will show you what I have already done and what is working correctly and soon after I will present the problem that I am not able to solve. In case I’m not clear somewhere, I’ll be super happy to clarify so that understanding gets better.

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

Hover:
- Color change in card icon and header;

Event Click:
- Make Ajax request and display with reply; - Color change in card icon and title;

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

That’s the 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>

The 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 is the 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);
    });

OBS.: Sorry for the detail that may seem boring, but if I do too simple ignore the question and can give Negative, sla rsrs.

PROBLEM:
Now my problem is according to the following example: If I click on the RH card, the request will be made and will return the data to the sponse, ok and with that I added a Slidetoggle for the purpose of open up and close and also along with this I put a function so that when this happens, it add in the tag < i > and on the tag < H4 > the class .actived/. text-actived, what they do can be seen just 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 having this card open I click on another card, for example Processos Industriais, the Slidetoggle() is disabled but still the classes .actived/. text-actived are added to the tag < i > and on the tag < H4 >.

My request is that someone help me understand how I can make this feature 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 it, the color of the tags "i" and "H4" are also disabled and activated in the new.

Well, that was it. As I asked in my previous question, I’m going to put the link of the site that I’m developing this feature for maybe you see better.
http://hecato.com/sistema/info/consultores.php

Any questions, please comment and I will answer as soon as possible. I am also testing some ways to fix this.

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

Answer 1

Just do you remove the class from all elements and then add only in the element clicked.

In his success, would look like this:

success: function (data) {
                    $(response).slideToggle('fast', function () {
                        $('a[data-consult-id] .element div').children('i').css("background-color", "");
                        $('a[data-consult-id] .element div').children('i').removeClass("actived");
                        $('a[data-consult-id] .element').children('h4').removeClass("text-actived");

                        $('.element div', obj).children('i').toggleClass('actived');
                        $('.element', obj).children('h4').toggleClass('text-actived');
                    }).html(data);
                }

Result on your page:

Remember to add the attribute [data-consult-id] links, because I noticed that there is a link without it.