Checkout

Checkout

by mobidevelop

HTML

<div>
    <form id="wiz" class="step-1" method="post">
        <div id="reservation-summary" class="panel panel-collapsible collapsed">
            <div class="panel-head">
                <h1 class="panel-title">Reservation Summary</h1>
                <div class="panel-summary">
                    <p>Hotel Name</p>
                    <p><span>Rooms</span>, <span>Dates</span></p>
                    <p><span>Grand Total</span>: <span>Price</span></p>
                    <div>
                        <a href="https://www.google.com">+ Add Another Room</a>
                    </div>                    
                </div>
            </div>
            <div class="panel-body">
                <p>Some information here</p>
                <p>Some information here</p>
                <p>Some information here</p>
                <p>Some information here</p>
                <p>Some information here</p>
                <p>Some information here</p>

            </div>    
        </div>
        <div class="panel">
            <div class="panel-head">
                <h1 class="panel-title">Sign In</h1>
            </div>
            <div class="panel-body">
                <p>Body</p>
            </div>        
        </div>
        <div id="guest-information" class="panel">
            <div class="panel-head">
                <h1 class="panel-title">Guest Information</h1>
                <div class="panel-summary">
                </div>
            </div>
            <div class="panel-body">
                <fieldset>
                    <label for="guest.givenName">First Name</label>
                    <input type="text" id="guest.givenName" name="guest.givenName" />
                </fieldset>
                <fieldset>
                    <label>Last Name</label>
                    <input type="text" id="guest.familyName" name="guest.familyName" />
                </fieldset>
                <fieldset>
                    <label>Country</label>
             ...

CSS

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    font: 16px Arial;
}

fieldset {
    border: none;
    margin-top: 12px;
    margin-bottom: 12px;
}

fieldset label {
    width: 100%;
    display: block;
    
    font-weight: bold;
    text-transform: uppercase;
}

fieldset input {
    width: 100%;
    display: block;
    
    padding: 4px;
    font-size: 115%;
    text-transform: uppercase;
}

fieldset select {
    width: 100%;
    display: block;
    
    padding: 4px;
    font-size: 115%;
    text-transform: uppercase;
    
    -webkit-appearance: none;
}

textarea {
    width: 100%;
    resize: none;
}

.two-cols {
    width: 100%;
    display: table;
}

.two-cols .one-col {
    width: 50%;
    padding: 0px 4px;
    display: table-cell;
}

.two-cols .one-col:first-child {
    padding-left: 0px;
}

.two-cols .one-col:last-child {
    padding-right: 0px;
}

.panel {
    margin: 8px;
}

.panel-collapsible {
    
}

.panel-collapsible .panel-head .panel-summary {
    display: none;
}

.panel-collapsible.collapsed .panel-head .panel-summary {
    display: block;
}

.panel-collapsible.collapsed .panel-body {
    display: none;
}

.panel-collapsible .panel-head {
    background: #CCCCCC;
    cursor: pointer;
}

.step-1 #guest-information {
    display: block;
}
.step-1 #payment-information {
    display: none;
}
.step-1 #requests {
    display: none;
}
.step-1 #confirm {
    display: none;
}

.step-2 #next-1 {
    display: none;
}

.step-2 #payment-information {
    display: block;
}
.step-2 #requests {
    display: block;
}
.step-2 #confirm {
    display: block;
}

JavaScript

function validateGuestInformation() {
    return;
}


$('.panel .panel-head').on('click', function(e) {
    if ($(this).parent().hasClass('panel-collapsible')) {
        $(this).parent().toggleClass('collapsed');
    }
});

$('.panel .panel-head a').on('click', function(e) {
    e.stopPropagation();
});

$('a[href="#step-2"]').on('click', function(e) {
    $(this).closest('.panel').addClass('panel-collapsible collapsed');
    $('#wiz').addClass('step-2');
    
});

$('#action-confirm').on('click', function (e) {
    if (validateGuestInformation()) {
        return true;
    }
    return false;
});