How to revert event to its original state after clicking on it again?

Question

I'm relatively new to web-development and I am building a portfolio website. I have these triangle bullet points I made using borders. Originally, they are pointing to the right and the idea is to be able to click on them and then have them point down (like an arrow) to then show some image (haven't gotten to that part yet) and then point back to the right when clicked again. I can get them to point down, but I tried implementing both point down and point left functions and now nothing happens when I click on it. I tried using an if statement but that didn't work either. I did a lot of research but nothing really covered my exact problem, maybe I'm not googling the right terms.

const projectList = document.getElementById('projects').querySelector('ul');
const projectPsuedo = projectList.querySelectorAll('span');

const switchBulletDown = event => {
    event.target.style.borderLeftColor = 'transparent';
    event.target.style.borderTopColor = '#111';
    event.target.style.left = '-1.2em';
    event.target.style.top = '1.6em';
}

const switchBulletRight = event => {
    event.target.style.borderLeftColor = '#111';
    event.target.style.borderTopColor = 'transparent';
    event.target.style.left = '-1em';
    event.target.style.top = '1.4em';
}

const eventHandler = psuedoClass => {
    if (psuedoClass.style.borderLeftColor === '#111') {
        psuedoClass.addEventListener('click', switchBulletDown);
    } else {
        psuedoClass.addEventListener('click', switchBulletRight);
    }    
}

projectPsuedo.forEach(eventHandler);

Answer 1

Ok I got it to work and I used the .toggle method to switch between classes.

const projectList = document.getElementById('projects').querySelector('ul');
const projectPsuedo = projectList.querySelectorAll('span');

const eventHandler = psuedoClass => {
    psuedoClass.addEventListener('click', () => {
        psuedoClass.classList.toggle('point-down')
    })
}

projectPsuedo.forEach(eventHandler);