Test Case Boilerplate

Fork this way...

by mofle

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

form input,
form select,
form textarea
{
    padding: 5px;
    font-size: 12px;
    background: #fff url('../images/bg_form_field.gif') top left repeat-x;
    border: 1px solid #d5d5d5;
    color: #333;
}

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;
        }
    });
});