Question

I’m working on a new website, where I have a contact ‘tab’ coming from the top of the browser window. Here’s the link: http://www.stefanhagen.nl/testlab/. If you click the tab, a contact form will appear (using slideToggle). But while the contact form appears, I want the tab to slide down with the contact form, as if the user ‘pulls’ the form inside the browser window. I now use slideToggle to show the contact form on clicking the tab. Where do I put the code to animate the tab itself? By the way: I have a liquid layout, so the tab isn’t ‘pushed down’ like normal, because I use absolute positioning for every div. Thanx in advance, and here’s my JQuery so far:

$('div.contacttab').click(function(){

$('div.contactform').slideToggle('slow', function(){

}); 

Answer 1

I would suggest placing the contact tab into the same container div as the form then positioning it off page (with only the contact tab showing) then sliding it into view when clicked so that they move together like this:

<div class="contactformulier" style="top: -350px;">
    <div id="inputarea" style="height: 350px;">
        <form action="php/contactengine.php" method="post">
        ....
        </form>
    </div><!--closes the #contact-area div -->
    <div class="contacttab" style="position: relative"><p>Contact</p></div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('.contacttab').click(function(e){
            e.preventDefault();
            // Show Contact Form //
            if (parseFloat$('.contactformulier').css('top') < 0)
                $('.contactformulier').animate({'top' : '0px' }, 'fast');
            }
            // Hide Contact Form //
            else {
                $('.contactformulier').animate({'top' : '-350px' }, 'fast');
            }
        });
    });
</script>

I hope this helps!