Test Case Boilerplate

Fork this way...

HTML

<form action="http://www.ipadenclosures.com/order#contact_1" method="post">
<div class="form_wrapper">
<input  name="form_id" type="hidden" value="1" /><input name="set_post" type="hidden" value="contact_1" />
<div class="category_collapse">Contact Information</div><div class="category_collapse_container">
    <div class="form_element"><label for="name">Name<span class="req">*</span></label><input  name="name" type="text" value="" /></div>
    
    <div class="form_element"><label for="Phone">Phone or Skype&nbsp;&nbsp;</label><input  name="Phone" type="text" value="" /></div>
    
    <div class="form_element"><label for="email">Email<span class="req">*</span></label><input  name="email" type="text" value="" /></div>
    
    <div class="form_element"><label for="notes"> Special Instructions | Notes&nbsp;&nbsp;</label><textarea  name="notes" cols="" rows=""></textarea></div>
    </div><div class="category_collapse">Company / User Details</div><div class="category_collapse_container">
    <div class="form_element"><label for="company">Company<span class="req">*</span></label><input  name="company" type="text" value="" /></div>
    
    <div class="form_element"><label for="country">Country&nbsp;&nbsp;</label><input  name="country" type="text" value="" /></div>
    
    <div class="form_element"><label for="Industry">Industry&nbsp;&nbsp;</label><select name="Industry"><option value="Select...">Select...         </option><option value="Retail">Retail</option><option value="Hospitality">Hospitality</option><option value="Health Care">Health Care</option><option value="Education">Education</option><option value="Event / Display ">Event / Display</option><option value="Software / IT">Software / IT</option><option value="Government">Government</option><option value="Other">Other</option></select></div>
    </div><div class="category_collapse">Enclosure Details</div><div class="category_collapse_container">
    <div class="form_element"><label for="ipad_version">Version...

CSS

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////// */
body
{
    height: 100%; z-index: 0;
    margin: 0; padding: 0;
    background-color: #eaeaea;
    font-family: Arial, sans-serif;
}
img { border: none; }
h1 { font-weight: normal; color: #333; margin: 0 0 3px 0; font-size: 20pt; padding: 2px 0 12px 4px; background: transparent url('../images/h1_tile.png') left bottom repeat-x; }
h2 { font-weight: normal; color: #666; font-size: 11pt; font-weight: bold; margin: 0 0 8px; padding: 0 0 5px 0; }
h3 { font-weight: normal; margin: 0 0 8px 0; padding: 0 0 5px 0; }
h4 { font-weight: bold; margin: 0 0 8px 0; padding: 0 0 5px 0; border-bottom: 1px solid #ccc; }

.small_text{ font-size: 7pt; color: #999; }
.image, .image_relative { padding: 3px; border: 1px solid #ddd; background-color: #fff; }
.image_left { padding: 3px; border: 1px solid #ddd; background-color: #fff; float: left; margin: 0 10px 10px 0; }
.image_right { padding: 3px; border: 1px solid #ddd; background-color: #fff; float: right; margin: 0 0 10px 10px; }
p { margin: 0 0 10px 0; padding: 0; }

.slider h4 { font-weight: normal; font-family: "Times New Roman", serif; color: #fff; margin: 0 0 2px 0; font-size: 30pt; padding: 2px; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.9); text-transform: uppercase; }
.clear { clear: both; font-size: 1px; }

img.avatar
{
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    padding: 2px;
    
    -moz-box-shadow: 0 0 4px 1px #ccc;
    -webkit-box-shadow: 0 0 4px 1px #ccc;
    box-shadow: 0 0 4px 1px #ccc;
}

.small { font-size: 8pt; font-weight: normal; }

.fancy_quote { display: block; padding: 15px 0 0 15px; font-size: 16pt; background: transparent url('../images/open_quote.png') left top no-repeat; }


/* //////////////////////////////////////////////////////////////////////////////////////////////////////////// */
div.shell { position: relative; margin: auto; width: 920px; }

/*...

JavaScript

$(document).ready(function() {
    // setup
    $(".category_collapse").each(function(index) {
        $(this).prepend('<span>' + (index + 1) + '</span>. ');
    });
    $(".category_collapse").css('cursor', 'pointer');
    if (!false) {
        $(".category_collapse").next("div").hide();
        $(".category_collapse:first").addClass('current_state');
        $(".category_collapse:first").next("div").slideDown("normal");
    }

    // action
    $(".category_collapse").hover(function() {
        $(this).addClass('over_state');
    }, function() {
        $(this).removeClass('over_state');
    });

    $(".category_collapse").click(function() {
        var checkElement = $(this).next("div");
        if (checkElement.is(':visible')) {
            checkElement.slideUp("normal");
            $(this).removeClass('current_state');
        }
        else {
            $(this).parent().find(".category_collapse").removeClass('current_state');
            $(this).parent().find(".category_collapse").next("div:visible").slideUp("normal");
            checkElement.slideDown("normal");
            $(this).addClass('current_state');
            return false;
        }
    });
});