JavaScriptにて、classの値をクリック操作で切り替えるにはどうすればいいのか

前提・実現したいこと

jqueryを用いずに、JavaScriptのみで以下の動作を実現したいと思っているのですが、
https://gyazo.com/427ce934a69973bcf709743b272383b4
このURLの動画内の、メニュー部分の左側にある不等号のような記号をクリックで変更する方法をご教授いただけると幸いです。

試したこと

まず不等号の上矢印と下矢印をdownとupのクラス名で作成し、JavaScriptのclassListプロパティのreplaceメソッドを用いて、id=menu1に対してクラス名をクリックで切り替えられるように記述しようとしたのですが、以下のJavaScriptの記述の ①部分であるmenu1.classList.replace('down','up');の後ろの②の部分に、もう一度クリックした時にupからdownにクラスを変更するための
menu1.classList.replace('up','down');を記述したところ、不等号が動かなくなりました。
１度目のクリックで上むきに変更するだけではなく、もう一度クリックすると下向きに戻る仕様にするには、どう記述すると良いのでしょうか？

HTML
1      <ul>
2        <p id="menu1" class="down">  メニュー１</p>
3        <div id="contents1" class="hide">
4          <li>中身１</li>
5          <li>中身２</li>
6          <li>中身３</li>
7        </div>
8      </ul>

CSS
1 /* 下矢印 */
2.down:before{
3    content:"\02228";
4  }
5  /* 上矢印 */
6.up:before{
7  content:"\02227";
8}

JavaScript
1const menu1 =document.getElementById('menu1');
2
3menu1.addEventListener('click', () => {
4 ① menu1.classList.replace('down','up');
5　②
6});

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

containsメソッドを使用すればよいかと思います。

js
1menu1.addEventListener('click', () => {
2  if (menu1.classList.contains('down')) {
3    menu1.classList.replace('down','up');
4  } else {
5    menu1.classList.replace('up','down');
6  }
7});