CSS / JS / HTML - Off Canvas Top

index.html

<div class="the-search">
    <!-- Something here -->
</div>

script.js

// Off canvas search (with two separate buttons)
$(function() {
    var expanded = false;
    $('.appear').click(function() {
        if (!expanded) {
            $('.the-search').animate({ 'height': '150px' }, { duration: 400 });
            expanded = true;
        }
    });
    $('.disappear').click(function() {
        if (expanded) {
            $('.the-search').animate({ 'height': '0px' }, { duration: 400 });
            expanded = false;
        }
    });
});

// Off canvas search (with one button)
$(function() {
    var expanded = false;
    $('.appear').click(function() {
        if (!expanded) {
            $('.the-search').animate({ 'height': '150px' }, { duration: 400 });
            expanded = true;
        } else {
            $('.the-search').animate({ 'height': '0px' }, { duration: 400 });
            expanded = false;
        }
    });
});

style.css

/* Off Canvas Function */
.the-search {
    width: 100%;
    height: 0px;
    background-color: #009742;
    position: fixed;
    overflow: hidden;
}