Rmarkdown html: change all tabs on click

[scheidan]

Hi all,

I have multiple tabset in my document, always with the same names. What kind of javascript magic do I need to insert that if a user changes one tab, all other tabs are changed too? In the example below, I want that winer all R or all _Julia_tabs are shown.

This is very similar to this questions:
r - Change second tabset on click in flexdashboard - Stack Overflow
Change second tabset on click in flexdashboard

Unfortunately my javascript skills are insufficient to adapt this solution to my problem.

I'd appreciate any hints!
Andreas

---
title: "Test 
---

# First

blabla 

### Hints {.tabset}

#### R
R is a great language

#### Julia
Julia is a nice language too

# Second

blabla 

### Hints {.tabset}

#### R
You can directly use `data.frame` ...

#### Julia
Import first `DataFrames` ...

[scheidan]

I found a solution for my question. Maybe it is helpful for somebody else.

Just add to you .Rmd file the following as js code block:

// Swap all tabs with the same name together

// make sure html is fully loaded
document.addEventListener("DOMContentLoaded", function(){
	// Add a click event listener to the document
	document.addEventListener('click', function (event) {
		// Check if the clicked element is a tab
		if (event.target.getAttribute('data-toggle') === 'tab') {
			// Get the ID of the clicked tab (withouth the number)
			var clickedTabId = event.target.getAttribute('href').replace(/-[0-9]*/g, '');

			// Get all tabs whos ID is the same (ignoring the number)
			var tabs = document.querySelectorAll('[href^="' + clickedTabId + '"][data-toggle="tab"]')

			// activate all tabs
			// see: https://getbootstrap.com/docs/3.4/javascript/#tabs
			for (var i = 0; i < tabs.length; i++) {
				$(tabs[i]).tab('show');
			}
		}
	})
});