Triggering a tab change from interactive Mermaid diagrams
- Dominant language
- C#
- Stars
- 4.4k
- Forks
- 890
- Avg merge
- 2h 11m
- Merged PRs (30d)
- 10
Description
**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](https://dotnet.github.io/docfx/spec/docfx_flavored_markdown.html#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:
```` markdown
``` mermaid
flowchart LR
first["First Tab"]
second["Second Tab"]
click first href "?tabs=first" _self
click second href "?tabs=second" _self
```
# [First Tab](#/tab/first)
Content for first tab.
# [Second Tab](#/tab/second)
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?
Contributor guide
Assessment
This issue has not been assessed yet.