jQuery UI accordion with named anchors, not toggling menu selection

Question

Using a jQuery UI accordion menu (navigation: true) with named anchor targets for the menu items, i.e. menu items refer to named anchors on the current page.

Accordion works fine with highlighting a clicked menu item if navigating to a different page, but if the menu item refers to a named anchor on the current page it does not change the menu selection/highlight upon clicking (though the link causes the page to scroll to the correct anchor as expected). The location hash is updated with the anchor, but the clicked menu item is not highlighted.

Not doing anything fancy otherwise. Below is a sample accordion menu that demonstrates the problem. When any of the menu items are clicked on, the accordion does not highlight that menu item to reflect that it is the current menu item.

I want it to highlight the menu item when it is clicked and expected accordion to work that way. How can I make it do that?

Is the accordion widget only designed to update/find/highlight the current menu item via the URL hash when accordion initializes on page load?

FYI I'm new to all this. Be gentle ;) TIA

<ul id="navigation">
  <li>
  <a class="head">Menu 1</a>
    <ul>
      <li><a href="#anchor1">Sub-topic 1</a></li>
      <li><a href="#anchor2">Sub-topic 2</a></li>
      <li><a href="#anchor3">Sub-topic 3</a></li> 
    </ul>
  </li>
  <li>
    <a class="head">Menu 2</a>
    <ul>
      <li><a href="#anchor1">Sub-topic 1</a></li>
      <li><a href="#anchor2">Sub-topic 2</a></li>
      <li><a href="#anchor3">Sub-topic 3</a></li>
    </ul>
  </li>
</ul>