タブの初期表示をJavaScriptでランダムに表示（Cocoon)

ある団体のホームページ（cocoon wordpress)を運営しています。

Topページで各部最新情報を表示するためCocoonのrssを使ってタブ表示をしていますが、絶えず、タブ設定で設定したTAB-01の一覧がアクセス初期表示されるのを止め、ランダムでタブが表示されるように変更しました。

■当初の設定

<div class="tab-wrap">

<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">○○部</label>
<div class="tab-content">
<!-- cocoon-rss	-->
[rss url='https://****.org/○○部/?feed=rss2' count=10 type=1 desc=0 cache_minute=180 target='_self']
</div>

<input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">△△部</label>
<div class="tab-content">
<!-- cocoon-rss	-->
[rss url='https://****.org/△△部/?feed=rss2' count=10 type=1 desc=0 cache_minute=180 target='_self']
</div>

<input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">□□部</label>
<div class="tab-content">
<!-- cocoon-rss	-->
[rss url='https://****.org/□□部/?feed=rss2' count=10 type=1 desc=0 cache_minute=180 target='_self']
</div>
</div>

■修正後の設定

1. HTMLを修正
   HTML部分はchecked=”checked”を削除。代わりに、JavaScriptでランダムに初期表示を設定。

<div class="tab-wrap">
<input id="TAB-01" type="radio" name="TAB" class="tab-switch" />
<label class="tab-label" for="TAB-01">○○部</label>
<div class="tab-content">
<!-- cocoon-rss -->
[rss url='https://****.org/○○部/?feed=rss2' count=10 type=1 desc=0 cache_minute=180 target='_self']
</div>

<input id="TAB-02" type="radio" name="TAB" class="tab-switch" />
<label class="tab-label" for="TAB-02">△△部</label>
<div class="tab-content">
<!-- cocoon-rss -->
[rss url='https://****.org/△△部/?feed=rss2' count=10 type=1 desc=0 cache_minute=180 target='_self']
</div>

<input id="TAB-03" type="radio" name="TAB" class="tab-switch" />
<label class="tab-label" for="TAB-03">□□部</label>
<div class="tab-content">
<!-- cocoon-rss -->
[rss url='https://****.org/□□部/?feed=rss2' count=10 type=1 desc=0 cache_minute=180 target='_self']
</div>
</div>

2. JavaScriptでランダムに初期表示を設定
   以下のスクリプトを、HTMLの最後に追加。

<script>
document.addEventListener("DOMContentLoaded", function () {
// ランダムで選択するタブIDの配列
const tabs = ["TAB-01", "TAB-02", "TAB-03"];
// ランダムなタブIDを選択
const randomTab = tabs[Math.floor(Math.random() * tabs.length)];
// 選択されたタブをチェック
const tabElement = document.getElementById(randomTab);
if (tabElement) {
tabElement.checked = true;
}
});
</script>