Nested tabsets about asciidoctor-tabs

[mojavelinux]

Technically, yes, nested tabs are supported. However, the script that manages the behavior is over-matching tab lists and tab panels. This is a side-effect of imprecise CSS selector matching. If the code more carefully selected only the elements for the tabset the user is interacting with, then the nested tabs would work as expected.

any nested tabsets underneath show up as floating tabs without any content or border.

This only means that no tab (and its corresponding panel) is selected.

Here's the sketch of the logic the script needs to use:

forEach.call(tabs.querySelector('.tablist').querySelectorAll('.tab'), function (el) {
  toggleSelected(el, el === tab)
})
var nextPanel = tabs.querySelector('.tabpanel')
while (nextPanel) {
  toggleHidden(nextPanel, nextPanel !== panel)
  if (!(nextPanel = nextPanel.nextElementSibling).classList.contains('tabpanel')) nextPanel = null
}

[eric-schneider]

Thanks for the quick response @mojavelinux! I've tested out the logic you provided and it seems to be working as expected 😄 I'll continue to monitor this issue for updates on the official release/fix. Once it's available I'll be sure to do more testing as part of our workstream to migrate to the official asciidoctor-tabs extension. Thanks for all your help!

[mojavelinux]

I also found that if a table is contained without a tab in nested tabs, it was getting wrapped in a tablecontainer div twice. The root of the problem is the same. The selector that is used to process tables was going too deep.