【zendesk】カテゴリのタブ切り替え実装方法

<section class="section">
        <h1>タイトル</h1>
        <!-- タブ切り替え -->
        <div class="tab-panel">
          <!--タブ-->
          <ul class="tab-group dflex">
            {{#each sections}}
            <li class="tab">{{name}}</li>
            {{/each}}
          </ul>
          <!--タブを切り替えて表示するコンテンツ-->
          <div class="panel-group">
            {{#each sections}}
              <div class="panel">
                <ul>
                  {{#each articles}}
                    <li><a href="{{url}}" class="article-list-link">{{title}}</a></li>
                  {{/each}}
                </ul>
              </div>
            {{/each}}
          </div>
        </div>
        <!-- //タブ切り替え -->
      </section>

.tab-group{
  gap: 20px;
  display: flex;
}
.tab{
  padding: 6px 8px;
  border: 1px solid #ddd;
  transition: all 0.2s ease-out;
  border-radius: 4px;
  cursor: pointer;
}
.tab.is-active{
  border: 1px solid #2177a7;
  background:radial-gradient(rgba(23, 140, 204, .95), #2177a7);
  color:#FFF;
}
.panel{
  display:none;
}
.panel.is-show{
  display:block;
}

document.getElementsByClassName('tab')[0].classList.add('is-active');
document.getElementsByClassName('panel')[0].classList.add('is-show');
document.addEventListener('DOMContentLoaded', function(){
  // タブに対してクリックイベントを適用
  const tabs = document.getElementsByClassName('tab');
  for(let i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', tabSwitch, false);
  }

  // タブをクリックすると実行する関数
  function tabSwitch(){
    // タブのclassの値を変更
    document.getElementsByClassName('is-active')[0].classList.remove('is-active');
    this.classList.add('is-active');
    // コンテンツのclassの値を変更
    document.getElementsByClassName('is-show')[0].classList.remove('is-show');
    const arrayTabs = Array.prototype.slice.call(tabs);
    const index = arrayTabs.indexOf(this);
    document.getElementsByClassName('panel')[index].classList.add('is-show');
  };
}, false);