How to rotate the arrow of drop-down menu in the navbar on click?

[jpmvferreira]

Description

When writing a website in Quarto, whenever you have an entry on the nav-bar which has sub-entries, a drop-down menu is created that looks something like this:

My expectation is that the arrow should initially be pointing towards the right, and on press, it should rotate to point downwards, to signal an entry closed or open respectively.
However, when I click on "Talks", nothing happens, and the arrow remains that same, always pointing down.

Is it possible to achieve this behavior?

[mcanouil]

Yes, using CSS (or JavaScript).
You can find plenty of examples of this on the internet you can adapt and use.

[jpmvferreira]

I've tried several solutions, and failed, that's why I asked whether it was possible.
Turns out, I was overwriting my own CSS by mistake, and that's what caused the issue. My knowledge in CSS is limited to say the best.
The solution that I ended up using, for future reference, is

// Add keyframes for rotation animation
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

// Apply the rotation animation to the dropdown toggle when it is shown
.navbar-nav .nav-link.dropdown-toggle.show::after {
  animation: rotate 0.5s ease-in-out;
  transform: rotate(180deg);
}

// Ensure the dropdown toggle rotates back when not shown
.navbar-nav .nav-link.dropdown-toggle::after {
  transition: transform 0.5s ease-in-out;
}

[mcanouil]

Thanks for sharing!