Search code examples
jqueryjquery-steps

change the layout of jquery-steps plugin

I'm trying to reconfigure the layout of the jquery-steps plugin. I suppose it's fairly simple task.. but I can't figure it myself. I would like to swap actions div and the steps div (showed in this picture). So that actions are on top and steps at the bottom.

Can anyone help me on this?

Thanks!

Solution

  • In jQuery Steps' Wizard Basic Demo, you could use jQuery to move the items in your desired order (actions, content, steps):

    $(function() {
    $("#wizard > .content").appendTo("#wizard");
    $("#wizard > .steps").appendTo("#wizard");
});

    UPDATE: after the latest update of jQuery Steps' website, Basic Demo was replaced with Basic Example, which is similar, but its id changed to example-basic, so you need the following code:

    $(function() {
    $("#example-basic > .content").appendTo("#example-basic");
    $("#example-basic > .steps").appendTo("#example-basic");
});