CODEWITHSUNDEEP
jqueryhtmljquery-animateslide
Jelmer
Jelmer

Reputation: 23

Pull out / slide up div from bottom?

I'd like to have some sort of 'chat' window slide up from the bottom when you click on the link/image. I've tried it myself first but I couldn't figure it out. Did some searching here and on other websites ... but apparently I'm not very good at this.

I looked at this aswell, but I couldn't get it working for me: Pull out a div from the bottom

Here is what I have so far: 

<div id="wrapper">
<div id="onlinehulp">
    <div id="clickme"><img src="http://i.imgur.com/hv3Rkf8.png">
        </div>
        <div id="contact-online">
        </div>
</div>


$( "#clickme" ).click(function() {
$( "#contact-online" ).slideToggle( "slow", function() {
    // Animation complete.
});
$('#onlinehulp').animate({bottom: '218px'}, 'slow');
});

I got it working so the window slides up when we click on the image, but when we click the image again it won't slide down, even though the actual window does disappear and slides back.

Anyone able to push me in the right direction?

Upvotes: 2

Views: 6031

Answers (2)

Jasper Seinhorst
Jasper Seinhorst

Reputation: 1074

To slide up, you need to animate back to bottom: 0px. To know if you the popup is open you can use a class:

$( "#clickme" ).click(function() {
    $( "#contact-online" ).slideToggle( "slow", function() {

    });

    if ($('#onlinehulp').hasClass('open')) {
        //close it
        $('#onlinehulp').animate({bottom: '0px'}, 'slow', function() {
            $('#onlinehulp').removeClass('open'); 
        });
    } else {
        // open it
        $('#onlinehulp').animate({bottom: '218px'}, 'slow', function() {
            $('#onlinehulp').addClass('open');
        });
    }
});

Upvotes: 3

rrk
rrk

Reputation: 15846

$( "#clickme" ).click(function() {
    $( "#contact-online" ).slideToggle( "slow");
    if($(this).hasClass('hide')){
        $('#onlinehulp').animate({bottom: '0px'}, 'slow');
        $(this).removeClass('hide').addClass('show');
    } else {
        $('#onlinehulp').animate({bottom: '218px'}, 'slow');
        $(this).removeClass('show').addClass('hide');
    }
});

Updated Fiddle.

Upvotes: 1

Related Questions