Accordion / Nav Element - highlight currently selected menu item

[krlklm]

I'm using a combination of Accordion and Nav, like in the Spectre.css docs.

What would be the best way to highlight the currently selected menu item in an accordion menu? I found this example with a combination of :focus and tabindex, but wasn't sure how to implement it in spectre css:

https://stackoverflow.com/questions/17479912/how-to-change-link-color-when-clicked

[candacej97]

You could add an active class on user click and style the <li>, or whichever html tag you use inside the accordion, in your css as a highlight

[krlklm]

Thanks a lot candacej97. Understood! I'll give it a try with my complicated navigation.

[krlklm]

Still struggling with this. It would be great if there was a solution that would dynamically add the class "active" to the currently active menu item / anchor, also when scrolling the page.

[candacej97]

Dynamic solutions would involve Javascript.

For the click event, you could use

function onLinkClick(e) {
  e.target.classList.append('active');
}

and add the function name to an event listener on the anchor from the menu item

and for the scroll event (code from https://www.w3schools.com/jsref/event_onscroll.asp)

function addActiveClass() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("myP").className = "test";
    } else {
        document.getElementById("myP").className = "";
    }
}
window.addEventListener("scroll", addActiveClass);

if you have a jsfiddle you can put your code on there to show what exactly you currently have

[krlklm]

Thanks so much, Candace. I will check this as soon as i find the time to work on this again.