Triggering a tab change from interactive Mermaid diagrams

[jakraft]

Operating System: Windows

DocFX Version Used: 2.59.0

Template used: default

Mermaid.js has support for adding interactive elements to flowchart which can either open a new URL or trigger a javascript function: https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction

I'm wondering if it's possible to combine this with the tabbed content feature of DFM so that the selected tab switches based on which diagram element was clicked last. The closest I've gotten to is something like this:

``` mermaid
flowchart LR
first["First Tab"]
second["Second Tab"]

click first href "?tabs=first" _self
click second href "?tabs=second" _self

First Tab

Content for first tab.

Second Tab

Content for second tab.

---

This works, and will force the tab group below to switch to the correct tab; however, it also causes the page to reload, which can result in the reader losing their place. Is there a way I can make this work without requiring a page reload? For example, is there a javascript function the diagram could hook into to trigger the tab change?

[paulushub]

@jakraft By the design in MSDN Docs, that is the behavior of the tabbed content - it sets a language mode so all tabbed contents with the same language anchor will be activated. I have not tested it with the default style, but it seems the mode is not persistent, otherwise; the page refresh will not change activated tabbed contents.

Personally, I thought the Custom Container will be the way to handle your needs but it seems the ::: triple-colons is not working in DocFX - https://github.com/dotnet/docfx/discussions/8095. If you cannot get the custom container to work, then use a div-tag and style it to your needs.