Jquery selectors - Find and swap Css class of an element

Question

I am creating a Timeline and would like to apply an iterativity when I click on each card/node.

I would like to click (expand card) on the link in the tag <a> whose css class is "Timeline-link" the class of <i class="**fa fa-folder** bg-blue icon"></i> was switched to <i class="**fa fa-folder-open** bg-blue icon"></i>

//Troca o sinal de "+" e "-" drill down by row
$('.timeline-link').click(function () {
    //alert("oi");

    icon = alert($(this).parents().prevAll().parents().parents('li').prev().find("li").html());

    //icon = alert($(this).parents().parents().parents('li').closet('i').html());

        //icon = $(this).find('i').find('.mile')
        //icon.toggleClass("fa fa-folder-open fa fa-folder")

        //icon = $(this).find("i");
        //icon.toggleClass("fa fa-folder-open fa fa-folder")


        //icon = $(this).find("i");
        //icon.toggleClass("fa fa-plus fa fa-minus")
    })

Answer 1

An answer with pure Javascript may be simpler for you. You can make one forEach and within the target element you look for a specific selector, in case the <i> and does the classList.toggle

let timelineLink = document.querySelectorAll('.timeline-link');

function classe(e) {
    let icon = e.currentTarget.querySelector('a i');
    icon.classList.toggle('fa-folder-open');
}

timelineLink.forEach( (el) => {
    el.addEventListener('click', classe);
}) 

.timeline-link {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    cursor: pointer;
    float: left;
} 

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="timeline-link">
    <a href="#">
        <i class="fa fa-folder bg-blue icon 2"></i>
        link
    </a>
</div>
    
<div class="timeline-link">
    <a href="#">
        <i class="fa fa-folder bg-blue icon 2"></i>
        link
    </a>
</div>