@shazarak al momento ho trovato questa soluzione:

for (i = 0; i < openEls.length; i++) {
    openEls*.className = openEls*.className.replace(" attivo", "");
  }
this.classList.add(isAttivo);

è una schifezza o può andare bene? soluzioni più eleganti e con meno problematiche?

La logica è corretta di togliere tutti e riattivare il this, ma non capisco l'uso dell'asterisco.

Potresti pure optare per soluzione solo CSS in alternativa.

@juanin oh grazie!

non capisci l'asterisco perchè non esiste! credo che l'inclusione del codice lo abbia formattato male, questo il codice che sto usando ora:

<script>
const openEls = document.querySelectorAll(".titolo");
const isVisible = "is-visible";
const isAttivo = "attivo";
for (const el of openEls) {
el.addEventListener("click", function() {
event.preventDefault();
const titoloScheda = this.dataset.titolo;
const scheda = document.querySelectorAll(".scheda");
for (i = 0; i < scheda.length; i++) {
scheda[ i ].className = scheda[ i ].className.replace(" is-visible", "");
}
document.getElementById(titoloScheda).classList.add(isVisible);
for (i = 0; i < openEls.length; i++) {
openEls[ i ].className = openEls[ i ].className.replace(" attivo", "");
}
this.classList.add(isAttivo);
});
}
</script>

per farla breve, è la prima soluzione che mi è venuta in mente per ottenere il risultato sperato,
il codice lo uso dentro a WordPress usando i blocchi Gutenberg ( perche ho bisogno purtroppo che poi chi gestirà il sito possa cambiarsi abbastanza facilmente immagini testi ecc)

quindi ho un contenitore con all'interno due colonne, a sinistra elenco di titoli uno sotto l'altro con link #, al cui click la classe "attivo" spara una animazione sul titolo e inoltre va a prendersi nella colonna di destra la relativa "scheda" associata, aggiunte la classe isVisible che attiva l'animazione ( quella vecchia slitta a destra per sparire, quella nuova slitta a sinistra per comparire)
la "scheda" della colonna di destra è un'altro contenitore, con immagine di sfondo, a cui devo aggiungere testo icone bottoni ecc ( che avranno altre animazioni tipo modali ecc, per la mia gioia)

al css puro ci avevo anche pensato ma su due piedi non mi veniva in mente una soluzione per usare Gutenberg ( lavoro solo con Generatepress e Generate Blocks pro)

@shazarak se uso quadra "[" con la lettera i e la "]" mi diventa un asterisco, non so perche

[ i ]

Io mi cacherei l'elemento con la classe CSS attivo così al click su qualsiasi elemento rimuovi la classe dall'elemento in cache e aggiungi al nuovo.

Per cache intendo te lo salvi in una variabile.

Lascio a te l'implementazione.

Io mi cacherei l'elemento con la classe CSS attivo così al click su qualsiasi elemento rimuovi la classe dall'elemento in cache e aggiungi al nuovo.

Per cache intendo te lo salvi in una variabile.

Lascio a te l'implementazione.

@overclokk urka grazie! ho capito cosa intendi ma non so farlo per ora. vado a studiare grazie !

@shazarak Si che lo sai fare, in pseudocode:

fuori dal loop creai una variabile vuota ('')
dentro al loop assegni l'elemento html che ha la classe alla variabile precedentemente creata

nell'evento click
verifichi che la variabile non sia ('')
verifichi che abbia la classe
se ha la classe la rimuovi

poi potresti verificare anche che l'elemento salvato sia lo stesso di quello cliccato ma questa è una finezza, male che vada togli e metti la classe allo stesso elemento.

@overclokk aaaahhhhhhhh ok ho capitoe si lo so fare hai ragione hahaha, grassie! vado a prendere una boccia di vino cosi magari mi sveglio hiihih

Ci sarebbe anche un altro modo per salvarti l'elemento attivo, banalmente un querySelector al click.

@overclokk dillo che vuoi farti odiare ihhhiihih, diciamo che per ora ho risolto e lascio il resto a miei futuri studi