Accordion: Any examples of disabling/enabling tabs?

I am looking at an application where I need the user to select things in a top down order and not be able to expand later tabs of the accordion until a choice in a higher level tab has been made.

Does anyone have code examples for this that I could study?



Do you mean something like wizard?
For now we do not have ready solutions but all is possible. You can contact our sales department for more information to

What is wizard?

Basically I want to create a vertical accordion. Say 5 tabs. Initially Tab 1 is visible and 2-5 are there but can’t be opened. Once someone selects an option in Tab 1, then Tab 2 is opened and available. They can return to Tab 1 if they want and then back to Tab 2. But, Tab 3-5 remain locked. Once something is selected in tab 2, then Tab 3 opens and becomes available. And the process continues down.

I can simply add tabs via code as needed but I would like to have the steps (tabs) visible on load so the user sees the steps that will be needed.

I can also hide the content in the later tabs or overlay it so its disabled but thats a less elegant way of handling this.

I hope that makes sense.

I finally found an answer. … ctive.html

I can hook the OnBeforeActive event and disallow it by returning false, correct?

Yes, you can this approach. But if you need ready solution and information how can you get it - contact our sales department to

The info in the above link worked just fine. I can track a global variable that indicates the max tab. Instead of using a letter or name on the tabs when instancing them, I use sequential numeric IDs. This allows me to fire a function when the user either selects something or selects a skip button…

// Enables access to the next highest tab
function SetNewTab(NewTab,Skipping){
	//  Keeps the tab in range
	if ( (parseInt(NewTab)>MaxTabs) ) {
		NewTab = MaxTabs;
	if ( (parseInt(NewTab)<1) ) {
		NewTab = 1;

	//  Prevents back stepping.  Only sets max tab if they are moving forward
	if (NewTab > MaxTab) {
		MaxTab = NewTab;

	// Return or open the highest tab
	if (Skipping==1){
		//Placeholder for skip prosessing
		alert("You Skipped tab " + (NewTab-1) + "!");

And this, part of the init routine, hooks up the event. Since I don’t need to individually control access to specific tabs, I don’t have to selectivly enable/disable them.

    dhxAccord.attachEvent("onBeforeActive", function(itemId) {
        var allow = parseInt(itemId) <= MaxTab;
        return allow;