Divided Checkout

Experiment with simplifying the checkout experience.

by Preston Badeer

HTML

<form class="checkout">
    <fieldset class="shipping">
        <legend>
            <img src="img/shipping.png" alt="" />Shipping</legend>
        <input type="text" placeholder="Email" />
        <input type="text" class="input-small" placeholder="First name" />
        <!-- if physical -->
        <input type="text" class="input-small" placeholder="Last name" />
        <input type="text" placeholder="Street" />
        <input type="text" placeholder="Apt, Suite, Etc." />
        <input type="text" class="input-small" placeholder="City" />
        <input type="text" class="input-mini" placeholder="State" />
        <input type="text" class="input-mini" placeholder="Zip" />
        <!-- end if physical -->
    </fieldset>
    <fieldset class="payment">
        <legend>
            <img src="img/payment.png" alt="" />Payment</legend>
        <input type="text" class="input-small" placeholder="First name" />
        <input type="text" class="input-small" placeholder="Last name" />
        <input type="text" placeholder="Street" />
        <input type="text" placeholder="Apt, Suite, Etc." />
        <input type="text" class="input-small" placeholder="City" />
        <input type="text" class="input-mini" placeholder="State" />
        <input type="text" class="input-mini" placeholder="Zip" />
        <select>
            <option>Credit Card Type</option>
            <option>American Express</option>
            <option>Visa</option>
        </select>
        <input type="text" placeholder="Credit Card Number" />
        <select class="span4">
            <option>Month</option>
        </select>
        <select class="span4">
            <option>Year</option>
        </select>
        <input type="text" class="input-mini" placeholder="CID" />
    </fieldset>
    <div class="clearfix">
        <button class="btn btn-danger span2"><i class="icon-remove"></i>

        </button>
        <button class="btn btn-success span10 disabled"...

CSS

fieldset {
    position: relative;
    padding: 7px;
    overflow: hidden;
}
legend {
    padding-top: 30px;
    text-align: center;
    color: white;
    height: 70%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
form.checkout {
    margin: 0;
}
form.checkout input {
    border: none;
    background: none;
    box-shadow: none;
    outline: none;
    border-bottom: 1px dashed lightgray;
}
form.checkout input[type="text"]:focus {
    border: none;
    outline: none;
    box-shadow: none;
    border-bottom: 1px dashed lightgray;
}
i.icon-link {
    padding: 5px;
    margin: 0;
    background: url('../img/link.png') no-repeat;
}

JavaScript

var heights = [];

// Store fieldset heights
$('fieldset').each(function (index) {
    heights[$(this).children('legend').text()] = $(this).height();
    $(this).css({
        height: "90px"
    });
});

// Click on legend
$('legend').click(function () {
    $('legend').fadeIn('fast');
    $('fieldset').animate({
        height: "90px"
    }, 'fast');

    $(this).fadeOut('fast');
    $(this).parent('fieldset').animate({
        height: heights[$(this).text()]
    }, 'fast');
});

// Focus on input
$('input').focus(function () {
    var $legend = $(this).siblings('legend');
    var $fieldset = $(this).parent('fieldset');

    if ($legend.is(':visible')) {
        $('legend').fadeIn('fast');
        $('fieldset').animate({
            height: "90px"
        }, 'fast');

        $legend.fadeOut('fast');
        $fieldset.animate({
            height: heights[$legend.text()]
        }, 'fast');
    }
});