Step by Step Process

This would normally be used in lengthy registration forms or a multi-page checkout. But you can use it for pretty much anything.

by bizamajig

HTML

<link rel="stylesheet" href="http://freshma.de/fiddles/style.css">
<script src="http://freshma.de/fiddles/script.js"></script>
<div class="step">
     <h3>Step One</h3>

    <p>While she stood looking eagerly at the strange and beautiful sights, she noticed coming toward her a group of the queerest people she had ever seen. They were not as big as the grown folk she had always been used to; but neither were they very small. In fact, they seemed about as tall as Dorothy, who was a well-grown child for her age, although they were, so far as looks go, many years older.</p>
    <p>Three were men and one a woman, and all were oddly dressed. They wore round hats that rose to a small point a foot above their heads, with little bells around the brims that tinkled sweetly as they moved. The hats of the men were blue; the little woman's hat was white, and she wore a white gown that hung in pleats from her shoulders. Over it were sprinkled little stars that glistened in the sun like diamonds. The men were dressed in blue, of the same shade as their hats, and wore well-polished boots with a deep roll of blue at the tops. The men, Dorothy thought, were about as old as Uncle Henry, for two of them had beards. But the little woman was doubtless much older. Her face was covered with wrinkles, her hair was nearly white, and she walked rather stiffly.</p>
</div>
<div class="step">
     <h3>Step Two</h3>

    <p>There seemed something menacing in their attitude toward my beast, and I hesitated to leave until I had learned the outcome. It was well I did so, for the warrior drew an evil looking pistol from its holster and was on the point of putting an end to the creature when I sprang forward and struck up his arm. The bullet striking the wooden casing of the window exploded, blowing a hole completely through the wood and masonry.</p>
</div>
<div class="step">
     <h3>Step Three</h3>

    <p>Ja asked me what Sheol was, and when I explained, as best I could, he said, "You are...

CSS

.step {
    position: relative;
    float: left;
    margin: 25px 15px;
}
.step h3 {
    font-size: 1.2em;
    text-transform: uppercase;
}
.step p {
    margin: 10px auto;
}
.inactive {
    display: none;
}
.next, .previous {
    padding: 2px 5px;
    color: #369;
    font-weight: bold;
    cursor: pointer;
}

JavaScript

//jQuery function for setting up steps based on a class
$.fn.step = function () {
    var step = $(this),
        count,
        currId,
        $this;
    step.each(function (index, count) {
        count = step.length;
        currId = index + 1;
        $this = $(this);
        $this.addClass('inactive').addClass('s' + currId);

        if (currId == 1) {
            $this.removeClass('inactive');
            $this.append('<span class="next">next</span>');
        } else if (currId >= 1 && currId != count) {
            $this.append('<span class="previous">previous</span> <span class="next">next</span>');
        } else {
            $this.append('<span class="previous">previous</span>');
        }
    });

    $('.next').click(function () {
        var $that = $(this);
        $that.parent(step).addClass('inactive');
        $that.parent().next(step).removeClass('inactive');
    });
    $('.previous').click(function () {
        var $other = $(this);
        $other.parent(step).addClass('inactive');
        $other.parent().prev(step).removeClass('inactive');
    });
};

$('.step').step();