0

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);

            }

        });
}
Holly
  • 1,956
  • 6
  • 41
  • 57

1 Answers1

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.

Community
  • 1
  • 1
Stano
  • 8,749
  • 6
  • 30
  • 44
  • Thank you! My solution actually turned out a little different to what you posted. I didn't need the plugin and needed to use animate to make it smooth on the actual site even though the jsfiddle was smooth enough, but the key thing missing was your use of page. which i'd tried before but for some reason the way you used it got things moving :) You answered the question, and took the time to provide a working jsfiddle so i'll certainly mark you correct but i'll also include my completed solution in the original question for anyone in the future. – Holly Aug 09 '12 at 12:32