Accordion: Any examples of disabling/enabling tabs?

Suite and Optimus Suite 5
#1

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?

TIA.

#2

Hi

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 sales@dhtmlx.com

#3

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.

#4

I finally found an answer.
dhtmlx.com/docs/products/dht … ctive.html

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

#5

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

#6

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
	dhxAccord.openItem(MaxTab);
	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;
    });