Kontrolowanie listy rozwijanej w CSS w momencie rozwinięcia - odwrotność atrybutu .collapsed

Mam listę rozwijaną zbudowaną w następujący sposób

<li class="nav-item nav-button">
                            <a class="menu-link accordion-toggle accordion-toggle-button" href="#" data-toggle="collapse" data-target="#others">
                                <img class="nav-menu-icon" src="/img/icons/others.png">
                                Others
                                
                            </a>
                        </li>
                        
                        <div id="others" class="collapse">
                            <li class="nav-item nav-button">
                            <a class="menu-link" href="#">                                
                                <span class="collapsed-text-icon">ER</span>
                                Exchange rates
                            </a>
                        </li>
                        </div>

Chcę ustawić strzałkę, która przy zwiniętej liście będzie się wyświetlała jako "/" a w momencie gdy jest rozwinięta - "/". W momencie, gdy ustawię to w CSS następująco:

.accordion-toggle:after {
    content: "\e114";    
    font-family: 'Glyphicons Halflings';
    font-size: 1.5vh;
    float: right;
    padding-right: 1vh;
}


.accordion-toggle.collapsed:after {
    content: "\e114";    
}

Wszystko działa ok poza tym, że po załadowaniu strony wyświetla się strzałka "/", zmienia się na prawidłową dopiero po rozwinięciu i zwinięciu listy (dobrze wnioskuję, że atrybut .collapsed w css oznacza listę po zwinięciu jej z pozycji rozwiniętej ale nie odnosi się do listy, w którą jeszcze nie kliknąłem?). Jak odnieść się do tego elementu w momencie, gdy lista jest początkowo zwinięta LUB jak odnieść się do niej w momencie, gdy jest rozwinięta?

Wrzuć proszę to na http://jsfiddle.net i podeślij link do Twojej wrzutki. O wiele łatwiej będzie nam gadać, jak będziemy mieli przed oczami działający przykład ilustrujący Twój problem.

Albo czegoś nie rozumiem, albo wydaje się to oczywiste. Trzeba po prostu dodać klasę collapsed do elementu <a> już na starcie, czyli:

<a class="menu-link accordion-toggle accordion-toggle-button collapsed" href="#" data-toggle="collapse" data-target="#others">