Question

I am working on a small project, it requires a few buttons that when you click on them it expand menus beneath them to show the user some options which they can select, however – how can I dynamically control the order of events?

For example: I need to select a colour before I can select a size and so on with more options.

EDIT:

Take this for example: http://www.notebookbuilder.co.uk

I have developed this (a long time ago), look at the functionality of this.

I want to be able to easily maintain this, because at the moment it’s an absolute nightmare to add and edit features.

As you can see you cannot move onto ‘the next level’ before you select your notebook size, then when you have selected your size the material option appears – but you cannot click on colour.

Answer 1

If I understand correctly, you have, say, 5 “actions”, displayed on the same page at the same time, and you want to user to execute action 1 (for example, select a color) before being able to execute action 2 (for example, select a size).

Create an array of size 5, put “false” in each element, when action 1 completes, put true in element 1 of the array, when the user clicks on action 2, check that the array element 1 is true before allowing the user to interact with it.

If you want it even more mantainable and generic, use an object instead of an array, and use a label for each action (for example “color”, “size” etc..). If also allow you to make more complex checks (like, for example, if the user can select size and color in ay order, but must have chosen both before selecting payment method … could not find a better example :D). This way you can also give the user a feedback “You must select a color first”.

Suppose the object where you keep which actions are completed is called “actions” :

$('#buttonSize').click(function() {
    // Do whatever you need
    // ...
    actions['size'] = true;
});

$('#buttonColor').click(function() {
    // Check here
    if (!actions['size'] === true) {
        alert("Select a size first");
    }
    // Do whatever you need
    // ...
    actions['color'] = true;
});

And so on.