Remplacer un hover(CSS) par un click(JS)

Bonjour,

J'ai créé un menu avec sousmenus en HTML/CSS. 

Le submenu se déroule au hover. J'aimerais qu'il fonctionne au clic, donc avec du JS. 

Est-ce que quelqu'un pourrait m'aider à faire ça ? J'essaye depuis 2j mais j'ai vraiment du mal avec le JS..

Voici mon menu dans le html: 

  <nav class="navigation">
      <ul class="mainmenu">

        <li><a href="2022">2022</a>
          <ul class="submenu">
            <li><a href="">photo1.jpg</a></li>
            <li><a href="">photo2.jpg</a></li>
            <li><a href="">photo3.jpg</a></li>
          </ul>
        </li>  

        <li><a href="">2021</a>
          <ul class="submenu">
            <li><a href="">photo1.jpg</a></li>
            <li><a href="">photo2.jpg</a></li>
            <li><a href="">photo3.jpg</a></li>
          </ul>
        </li>

        <li><a href="">2020</a>
          <ul class="submenu">
            <li><a href="">photo1.jpg</a></li>
            <li><a href="">photo2.jpg</a></li>
            <li><a href="">photo3.jpg</a></li>
          </ul>
        </li>

et le hover dans mon css : 

.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;

}  

Macintosh / Chrome 102.0.0.0