Navigate tabsets from ToC (tabs must be named uniquely)

tabset.js

document.addEventListener('DOMContentLoaded', function() {
  const anchors = Array.from(document.querySelectorAll("ul.nav.nav-tabs li a")).
    filter(a => a.attributes.role.value === "tab").
    reduce((hash, a) => {
      hash["#" + a.innerText.replace(/ /, "_")] = a;
      return hash;
    }, {});
  window.addEventListener('hashchange', function() {
    const anchor = anchors[location.hash];
    if (anchor !== undefined) {
      anchor.click();
    }
  });
});

tabset.lua

local tabset_level = 100
local tab_level = 101
local flag = false
local stringify = pandoc.utils.stringify

function is_tabset(classes)

  local res = false

  for _,v in ipairs(classes) do
    res = res or (v == "tabset")
  end

  return res
end

function Block(block)
  if block.tag == "Header" then
    local level = block.level
    if level <= tabset_level then
      flag = is_tabset(block.classes)
      tabset_level = flag and level or 100
      tab_level = tabset_level + 1
    elseif level == tab_level then
      local id = block.identifier
      block.identifier = id .. "-tab"
      return {
        block,
        pandoc.RawBlock(
          "html",
          "<h" .. level .. " style='visibility: hidden'>" ..
          stringify(block) ..
          "</h" .. level .. ">"
        )
      }
    end
  end
end

tabset.Rmd

---
title: "minidown::mini_document"
author: "Atsushi Yasumoto"
date: "`r Sys.Date()`"
output:
  html_document:
    toc: true
    toc_float: true
    self_contained: false
    pandoc_args: ["--lua-filter", "tabset.lua"]
---

```{=html}
<script src='tabset.js'></script>
```

# A {.tabset}

## tab A-1

content A-1

## tab A-2

content A-2

# B {.tabset}

## tab B-1

content B-1

## tab B-2

content B-2

hmmm, I have no ideas. It needs some investigations, but I am running out of time...