Question

Im new to jquery so pls bear with me!

I am using the code below to scroll open a div containing text when you click on an image above it. This works fine apart from when the image is near the bottom of the screen. Then the div containing the text opens but it opens below the fold – ie youhave to scroll down the screen to see it.

Is there an easy way to add to the code below that will move the page up when the div scrolls down? So that way the user will not have to scroll the page down to see the text?

Thanks

$(document).ready(function() {
    //Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').next().hide(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
        $('.acc_trigger').next().slideUp(); //Remove all "active" state and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container

}
    return false; //Prevent the browser jump to the link anchor

});

});

Answer 1

You can use this:

Demo: http://jsfiddle.net/SO_AMK/uecpG/

jQuery:

$(document).ready(function() {
    $('.acc_container').hide();
    $('.acc_trigger:first').next().hide();
    $('.acc_trigger').click(function() {
        if ($(this).next().is(':hidden')) {
            $('.acc_trigger').next().slideUp();
            $(this).toggleClass('active').next().slideDown(400, function() {
                $(document).scrollTop($(this).prev().position().top);
            });
        }
        return false;
    });
});​

Please note that there is no animation, implementing one would require much more code because the element’s height is constantly changing, if you have a predetermined height than the math is simple.