Tidy up your forms with horizontal sliding divs using JQuery UI

Many websites still make use of lengthy scrollable forms or numerous page post backs when requesting input from their users, e.g shopping cart check outs etc. jQuery and jQueryUI give developers the opportunity to significantly improve the overall UI experience.

In this tutorial, we will look into creating sliding panels/divs that respond to user input and allow the users to navigate through the data entry process in a nice, fluid way.

First we need to ensure that we reference the appropriate libraries:

• jQuery 1.9.0
• jQueryUI 1.9.2

Then we need to create our html elements:

<div id="outer">
    <p class="clear" />
    <div id="first-page">
        <div class="content-container">This is the FIRST page</div>
        <div class="button-container">
            <div id="go" class="button">GO</div>
        </div>
    </div>
    <div id="second-page">
        <div class="content-container">This is the SECOND page</div>
        <div class="button-container">
            <div id="back1" class="button">BACK</div>
            <div id="go1" class="button">GO</div>
        </div>    
    </div>
    <div id="third-page">
        <div class="content-container">This is the THIRD page</div>
        <div class="button-container">
            <div class="button">CLICK ME!</div>
        </div>
    </div>
</div>

The code above will create an “outer” (container) div and then 3 divs with some navigational buttons (GO and BACK).

Next we will decorate the elements using css. This can be placed either within the html page or an external file that you will need to link to. The css is listed below:

#outer {
    width: 100%;
}

#first-page {
    border: 2px solid #000;
    width: 300px;
    height: 300px;
    margin-top: 40px;
    text-align: center;
    overflow: hidden;
    background-color:yellow;
    position: absolute;
    z-index:3
}

#second-page {
    border: 2px solid #000;
    height: 300px;
    margin-top: 40px;
    text-align: center;
    overflow: hidden;
    width: 340px;
    background-color: blue;
    position: absolute;
    z-index: 2;
}

#third-page {
    border: 2px solid #000;
    height: 300px;
    margin-top: 40px;
    text-align: center;
    overflow: hidden;
    width: 380px;
    background-color: grey;
    position: absolute;
    z-index: 1;
}

.content-container{
    height:260px;
}

.button-container{
    height:40px
}

.button{
    width:100px;
    border: 1px solid #000;
    background-color:red;
    color:white;
    float:left;
    display:block;
    margin-left:20px;
}

.clear {
    clear: both;
}

Notice the use of the z-index to stack up the divs one on top of the other. The higher the z-index the higher the div will be placed/stacked. Also, the colors used for this example have only been chosen in order to easily distinguish between the different panels.

And finally, the JavaScript code that will tie everything together and will provide the necessary animation:

$('#first-page #go').click(function () {
    $('#first-page').hide('slide', {
        direction: 'left'
    }, 600);
});

$('#go1').click(function () {
    $('#second-page').hide('slide', {
        direction: 'left'
    }, 600);
});

$('#back1').click(function () {
    $('#first-page').show('slide', {
        direction: 'left'
    }, 600);
});

$('#third-page').click(function () {
    alert('You are done!');
    $(this).hide('slide', {
        direction: 'left'
    }, 600);
});

The JavaScript code above will cause each individual div to slide to the left until it’s hidden when the div containing the GO text is clicked. When the div with the BACK text is clicked, the previous div is restored using a slide to the right animation.

You should now have something that looks like this:

You can see a working example at this jsFiddle and play around with the code. If you like it feel free to use the code on your site.

Happy coding…