How do I select a tab and set content of the tabpanel in JavaScript

Question

I'm stuck at this: I've created tabs and corresponding tabpanels. By default, I've hidden the tabs. To make a tab visible, I use this JavaScript line:

document.getElementById("tab-id").setAttribute("selected", true);

However, the content of the corresponding tabpanel does not update as I expected. I've tried using this:

document.getElementById("tabbox-id").selectedPanel = "tabpanel-id";

But nothing is happening; the content of the tabpanel is not updated.

Any assistance will be highly appreciated.

Answer 1

The selected attribute is set internally, it is merely an indicator that selection changed - changing it won't actually change selection. What you most likely want to do is this:

var tabpanel = document.getElementById("tabpanel-id");
document.getElementById("tabbox-id").selectedPanel = tabpanel;

Note that selectedPanel is the panel and not its ID. Alternatively you could also use selectedIndex :

document.getElementById("tabbox-id").selectedIndex = 1;

Documentation