jak zmienić stan elementu po zdarzeniu czystym js

Question

Witom!

mam takie menu z listą rozwijaną, chciałbym po kliknięciu w taki dziubek >, rozwinąć i zmienić stan tego dziubka >, czyli obrócić "rotate" o 90deg i może jakiś transition, ale nie wiem jak to zrobic. Szukałem w necie ale wszystko jest z jqurey a ja nie chcę się uczyć jquery. więc próbowałem coś takiego

js

document.querySelector("i.icon-angle-right").addEventListener("click", function(e) {
    e.target.classList.toggle("style");
});

css

.style {
    transform: rotate(90deg);
}

HTML

 <ul id="list-nav">

            <li> Strona główna <i class="icon-angle-right">&#xf105;</i> </li>

ikonka ze strony fontello

no i próbowałem też element i jako element blokowy, i inne konbinacje np. element i w divie i to div obracaj ale chyba nie rzecz w strukturze

jeżeli będzie potrzeba wiecej informacji to dośle 

nie musicie odwalać za mnie całego kodu, ale jakąś wskazówke, co kolwiek, i jeżeli trzeba do tego czegoś większego czyli jakies zawasowanej biblioteki lub frameworka to odpuszcze bo to jeszcze nie czas na to myśle

Answer 1

i jako element blokowy

Jak to dodałem do Twojego kodu to zdaje się ładnie działać. Patrz: https://jsfiddle.net/4rt2v5ms/