如何在可实现的可折叠菜单上的图标之间切换？

Question

我在实现中实现了以下可折叠菜单。

我想在图标之间切换，以便在显示菜单项时（如上）显示向下箭头，或者在隐藏菜单项时显示向右箭头。我该如何在实现中实现呢？

PS：箭头表示“主题支柱”句子旁边的灰色图标

代码

<ul id='slide-out' class='sidenav'>
  <li>
    <ul class="collapsible collapsible-accordion">
      <li class="active">
        <a class="collapsible-header waves-effect waves-teal" tabindex="0">
          Thematic pillars <i class="material-icons right" style="margin-right:0;">arrow_drop_down</i>
        </a>
        <div class="collapsible-body">
          <ul>
            <li class="side-links"><a href="/thematic-pillars#pillar-one">Pillar One</a></li>
            <li class="side-links"><a href="/thematic-pillars#pillar-two">Pillar Two</a></li>
            <li class="side-links"><a href="/thematic-pillars#pillar-three">Pillar Three</a></li>
            <li class="side-links"><a href="/thematic-pillars#pillar-four">Pillar Four</a></li>
          </ul>
        </div>
      </li>
   </ul>
  </li>
</ul>