CODEWITHSUNDEEP
javascriptjquery
Stefan Hagen
Stefan Hagen

Reputation: 658

How to animate a div at the same time as slideToggle hide/show

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(){

});

Upvotes: 1

Views: 324

Answers (2)

dSquared
dSquared

Reputation: 9825

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!

Upvotes: 1

Damon Bauer
Damon Bauer

Reputation: 2726

I'd put the contact tab and the contact form div inside of a wrapper, and slide the wrapper down when the tab is clicked. That way, the tab moves with the form div.

Upvotes: 1

Related Questions