CODEWITHSUNDEEP
tabsxultabpanel
okello
okello

Reputation: 609

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

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.

Upvotes: 0

Views: 2208

Answers (1)

Wladimir Palant
Wladimir Palant

Reputation: 57651

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

Upvotes: 1

Related Questions