Wordpressサイトでのタブ切り替えが上手くいかないのでコードの修正について

wordpressでサイトを作成しているのですが、タブの切り替え部分で
pcでは問題なく動くのですがtablet、スマホで閲覧した際に
反応しないのでタブ切り替え出来なくなるので、どなた様かご教示願います。
よろしくお願いします。

html
1<div class="tab-panel">
2  <!--タブ-->
3  <ul class="tab-group">
4    <li class="tab tab-A is-active">Tab-A</li>
5    <li class="tab tab-B">Tab-B</li>
6    <li class="tab tab-C">Tab-C</li>  
7 </ul>
8  
9  <!--タブを切り替えて表示するコンテンツ-->
10  <div class="panel-group">
11    <div class="panel tab-A is-show">Content-A</div>
12    <div class="panel tab-B">Content-B</div>
13    <div class="panel tab-C">Content-C</div>
14  </div>
15</div>

css
1.tab-group{
2  display: flex;
3  justify-content: center;
4}
5.tab{
6  flex-grow: 1;
7  padding:5px;
8  list-style:none;
9  border:solid 1px #CCC;
10  text-align:center;
11  cursor:pointer;
12}
13.panel-group{
14  height:100px;
15  border:solid 1px #CCC;
16  border-top:none;
17  background:#eee;
18}
19.panel{
20  display:none;
21}
22.tab.is-active{
23  background:#F00;
24  color:#FFF;
25  transition: all 0.2s ease-out;
26}
27.panel.is-show{
28  display:block;
29}

js
1document.addEventListener('DOMContentLoaded', function(){
2  // タブに対してクリックイベントを適用
3  const tabs = document.getElementsByClassName('tab');
4  for(let i = 0; i < tabs.length; i++) {
5    tabs[i].addEventListener('click', tabSwitch);
6  }
7
8  // タブをクリックすると実行する関数
9  function tabSwitch(){
10    // タブのclassの値を変更
11    document.getElementsByClassName('is-active')[0].classList.remove('is-active');
12    this.classList.add('is-active');
13    // コンテンツのclassの値を変更
14    document.getElementsByClassName('is-show')[0].classList.remove('is-show');
15    const arrayTabs = Array.prototype.slice.call(tabs);
16    const index = arrayTabs.indexOf(this);
17    document.getElementsByClassName('panel')[index].classList.add('is-show');
18  };
19});