Question

I’m using jquerys slideToggle method and would like to add a callback function that also scrolls the page down so that the newly expanded text is visible even when it appears off the pages current visible area.

I found several similiar / identical questions but i couldn’t get any of the solutions to work, I’m new to javascript so i could really do with someone to take a quick look at my code.

Javascript:

$(document).ready(function() {

    //br is the most efficient way to get desired effect with inline h3's
   $("<br/>").insertBefore("h3");

   //collapse all expandable sections on page load
   $(".expansion_text").slideToggle("slow");
});

//Click for expansion
$(function(){
    $("h3").click( function(){
        $(this).siblings(".expansion_text").slideToggle( "slow", function(){
            if ( $(this).is(":visible") ){
                $("html, body").animate({
                scrollTop: $(this).offset().top
                }, "slow");
            }
        });

    });
});​

HTML:

<div class="expandable">
<h3>The Prisoner of Benda</h3>
<div class="expansion_text">
<p>Bender, I didn't know you liked cooking. That's so cute. The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. This is the worst part. The calm before the battle. Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually!</p>  
</div></div>
<div class="expandable">
<h3>Where the Buggalo Roam</h3>
<div class="expansion_text">
<p>Are you crazy? I can't swallow that. Bender, quit destroying the universe! Belligerent and numerous. Can I use the gun?</p>
<ol>
<li>Can we have Bender Burgers again?</li>
<li>I was all of history's great robot actors - Acting Unit 0.8; Thespomat; David Duchovny!</li>
<li>I videotape every customer that comes in here, so that I may blackmail them later.</li>
</ol>
</div></div>

EDIT: SOLUTION, reached with the help of accepted answer but i thought different enough to post here for future reference:

//Click for expansion
$(function(){
    $("h3").click( function(){
        toggleExpansion($(this).siblings(".expansion_text"));
    });
});

function toggleExpansion(expandableText){
    expandableText.slideToggle( "slow", function(){
            if ( $(this).is(":visible") ){

                var page = $("#page");

                page.animate({scrollTop: page.scrollTop() +
                    $(this).siblings("h3").position().top},1000);

            }

        });
}

Answer 1

Afaik this is not so trivial. Recently I encountered similar problem and found nice solution here. It uses one additional but quite tiny jQuery resize plugin (1KB). Here follows a possible modification of your code:

HTML:

<script type="text/javascript" src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.min.js"></script>  

Javascript:

$(".expansion_text").css('display','none'); //instead of .slideToggle("slow");

$.resize.delay = 10;
$('.expandable').resize(function(){
    var page = $('#page');
    page.scrollTop(page.scrollTop() + $(this).children('h3:first').position().top);
});

The fiddle is here.