纯JavaScript下拉DIV动画

Question

I'm tired to search google for this so I decided to ask professionals here. Is it possible and How to create an effect of drop down DIV like here http://137pillarshouse.com/accommodation - the BOOK NOW block with pure javascript without jQuery or any libraries.

THanks

Answer 1

well they didn't obfuscate javascript code, you can learn from their code.

1. http://137pillarshouse.com/js/script.js

// show/hide booking form
        $('#bookingpanel #booknow').click(function(){
            $('#quickbookingform').slideToggle(750,'easeOutQuart');
            $('#bookingpanel').toggleClass('open');
            $(this).html($(this).html() == 'Book <em>Now</em>' ? 'Close' : 'Book <em>Now</em>');
            return false;
        });
// Quick Booking Form
    $('#StartDateString').datepicker({dateFormat:'dd/mm/yy',firstDay:1,minDate:1,maxDate:'+18m'});

2.

    <div id="bookingpanel" class="">
 <form action="https://www.luxuryroomreservations.com/en-GB/IBE/115/Landing/Index" method="post" id="quickbookingform" class="booking" style="display: none; ">
    <fieldset>
    <label for="StartDateString">Arrival Date</label>
    <input class="text hasDatepicker" id="StartDateString" name="CurrentBooking.CurrentUserSearch.StartDateString" type="text" value="">
     <label for="NoOfNights">Nights</label>
     <select id="CurrentBooking_CurrentUserSearch_NoOfNights" name="CurrentBooking.CurrentUserSearch.NoOfNights">
        <option selected="selected" value="1">1</option>
        .....
    </select>
    <div class="left">
    <label for="NoOfAdults">Adults</label>
    <select id="NoOfAdults" name="CurrentBooking.CurrentUserSearch.NoOfAdults">
        <option value="1">1</option>
        <option selected="selected" value="2">2</option>
        <option value="3">3</option>
    </select>
    </div><!-- /.left -->
    <div class="right">
    <label for="NoOfChildren">Children</label>
    <select id="NoOfChildren" name="CurrentBooking.CurrentUserSearch.NoOfChildren">
            <option selected="selected" value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div><!-- /.right -->
    <input id="CurrentBooking_CurrentUserSearch_AccountId" name="CurrentBooking.CurrentUserSearch.AccountId" type="hidden" value="">
    <input id="CurrentBooking_CurrentUserSearch_SpecialRateCode" name="CurrentBooking.CurrentUserSearch.SpecialRateCode" type="hidden" value="">
    <input id="CurrentBooking_CurrentUserSearch_IataCode" name="CurrentBooking.CurrentUserSearch.IataCode" type="hidden" value="">
    <input id="CurrentBooking_CurrentUserSearch_HotelCode" name="CurrentBooking.CurrentUserSearch.HotelCode" type="hidden" value="HUCNXPH">
    <p><input type="submit" value="Check Availability" id="booking_submit"></p>
</fieldset>
</form><a href="#bookingpanel" id="booknow">Book <em>Now</em></a>
</div>

3. and a bit of CSS

Mobile

@media only screen and (min-width: 768px)
#bookingpanel {
top: -10px;
right: 60px;
}

desktop

#bookingpanel {
position: absolute;
top: -10px;
right: 20px;
z-index: 100;
width: 15em;
-moz-transition-duration: .25s;
-webkit-transition-duration: .25s;
-o-transition-duration: .25s;
-ms-transition-duration: .25s;
transition-duration: .25s;
}

the rest is up to you... style it a bit and you'll get there I'm sure :)