CODEWITHSUNDEEP
jquerycss
teair
teair

Reputation: 187

slideToggle() toggles out of screen

I've got a problem with jquery's slideToggle().I'm toggling my footer using:

$(document).ready(function(){
    $('.close').click(function(){

            $('#footer').slideToggle();
            if( $(this).hasClass('active') )
                $(this).text('show');
            else
                $(this).text('hide');

        $(this).toggleClass('active');
    });     
});

on a website that is pretty long.When I close or open the footer,I can always see the div I use to toggle the footer,but when reopening,the footer slides out of the screen(so that you would have to scroll down in order to see it).How can I change this so that the footer gets shown in the part of the screen I am currently in?(well,I hope it's clear what I mean because i can not upload anything onto my webhoster atm).

http://jsfiddle.net/bm45k0ps/

Upvotes: 0

Views: 686

Answers (2)

Bla...
Bla...

Reputation: 7288

You can do something like this:

Version 1: animate concurrently..

        $('#footer').slideToggle(500);
         $('html, body').animate({
                scrollTop: $("#footer").offset().top + $("#offset").height()
            }, 500);

Version 2: animate after slideToggle is done..

        $('#footer').slideToggle(function(){
            $('html, body').animate({
                scrollTop: $("#footer").offset().top + $("#offset").height()
            }, 500);
        });

Check out this Fiddle...

Upvotes: 1

Yogesh Sharma
Yogesh Sharma

Reputation: 2017

Please check Demo

$(document).ready(function(){
        $('.close').click(function(){

            $('#footer').slideToggle(function(){

            }, function(){
            $('html, body').animate({ 
            scrollTop: $("#footer").offset().top + $("#offset").height()
        }, 800);
            });
                if( $(this).hasClass('active') )
                    $(this).text('Footer anzeigen');
                else
                    $(this).text('Footer verbergen');

            $(this).toggleClass('active');


        });

});

you can do something like this

Upvotes: 1

Related Questions