.slideToggle auto scroll down to reveal content

Question

I am using .slideToggle to open a panel when the user clicks a link:

<script type="text/javascript"> 
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); 

return false;
});
});
</script>

The content of the toggled div (#panel) is taller than the height of the containing div so scorllbars show up. I would like the vertical scrollbar to automatically scroll down to the reveal the new content when the div gets toggled. I think I could probably do this with .scrollTop to make this happen but Im not sure how to go about making it happen at the same time... Any ideas?

EDIT: There seems to be a consensus that this is the best way to go about achieving what I described:

<script type="text/javascript">
$(document).ready(function(){
    $(".btn-slide").click(function(){
        var $panel = $("#panel");
        $panel.slideToggle("slow");
        if ($panel.is(':visible')){
            $panel.parent().scrollTop($panel.height()-$panel.parent().height());
        }
        $(this).toggleClass("active"); 

        return false;
    });
});
</script>

This makes the panel slide but the scroll down effect isn't working..

If this doesn't make any sense please let me know so I can rewrite it.I really need to get this solved - thanks! — Thomas, Jul 29 '10 at 06:16
Try the solution from this post: http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div var panelDiv = document.getElementById("panel"); panelDiv.scrollTop = panelDiv.scrollHeight; — Marimuthu Madasamy, Jul 29 '10 at 06:56
Someone suggested something similar but I can't seem to get both effects to fire. Only the panel slides. — Thomas, Jul 29 '10 at 07:03

score 3 · Accepted Answer · 2010-07-29T08:29:37.270

3

I've done something like this before:

   $(".btn-slide").click(function(event){

    if ( $(this).hasClass("active"))
    {
         $(this).removeClass("active");
         $("#panel").slideUp("slow");
    }
    else
    {
         $(this).addClass("active");
         $("#panel").slideDown("slow");

         var destination = $("#container ").offset().top + $("#container").height();


         $("#container").animate({ scrollTop: destination},"slow");
         //or
         //$("#container").animate({ scrollTop: destination},"slow", "fx_name_here");

    }


    event.preventDefault();
});

Html:

<a href="#" class="btn-slide">Fire Panel</a>
<div id="container">
    <div id="panel">sdfsdfsdfs</div>
</div>

Would that help you?

EDIT:

If you download the jQuery Easing Plugin you can add different effects to the sliding, adding the fx name into the code (commented out line in answer)

Improved code so there is less code but same effect.

edited Jul 29 '10 at 08:29

answered Jul 29 '10 at 07:15

It seems like it is what I am looking for, but I can't seem to get it to work correctly. http://jsfiddle.net/xmTCs/7/ – Thomas Jul 29 '10 at 07:27
Yeah I just got the panel slide to work with this, but the scroll down effect doesn't seem to work. – Thomas Jul 29 '10 at 07:38
What is the scroll down effect? – Jul 29 '10 at 07:40
The content of panel is taller than its containing div, so scrollbars appear. I need the scrollbars to automatically scroll down to the lowest point, once the #panel div toggles, so that the user sees the new content. – Thomas Jul 29 '10 at 07:45
For different effects you do, but not for that. Not for the example. Do you want the the scrollbar of the panel to scroll down or the main content to scroll to the top of the panel? – Jul 29 '10 at 08:02
Main content needs to scroll down to display the bottom of the panel content. – Thomas Jul 29 '10 at 08:04
Ok. Updated answer. I had to set height of #container to 400px to see the effect. (Although that might not be a problem when there is content in the page) – Jul 29 '10 at 08:10
So wait, you got #container to scroll down to the lowest point? For example in this version - can you see the blue line at the bottom of #panel? – Thomas Jul 29 '10 at 08:14
Updated answer a bit. There was no blue line set in the css...Is it a bottom border? – Jul 29 '10 at 08:19
Yeah, I added the blue line as a border at the bottom so I can tell if it has scrolled all the way. If it has worked correctly, you should be able to see the blue line and not the text at the top. – Thomas Jul 29 '10 at 08:20
Tried it and it works. Has to add a +1 to the scroll destination. – Jul 29 '10 at 08:24
You got the #container to automatically scroll down to the bottom of the #panel content so that you can see the blue line when the user clicks the link? I still have been unable to get the #container to scroll. – Thomas Jul 29 '10 at 08:28
Just realised I was scrolling the wrong thing. Updated answer and tested it. You can see the blue line so believe it does what you want. – Jul 29 '10 at 08:31
Amaaaaazin' Thank you so much. Works perfect. – Thomas Jul 29 '10 at 08:32

.slideToggle auto scroll down to reveal content

1 Answers1