views:

48

answers:

1

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..

+2  A: 

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.

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
Updated my answer. Tested it and works fine for me.
Yeah I just got the panel slide to work with this, but the scroll down effect doesn't seem to work.
Thomas
What is the scroll down effect?
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
Gotcha updated answer.
Do I need to use the easing plugin for this? http://jsfiddle.net/xmTCs/18/
Thomas
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?
Main content needs to scroll down to display the bottom of the panel content.
Thomas
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)
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
Updated answer a bit. There was no blue line set in the css...Is it a bottom border?
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
Tried it and it works. Has to add a +1 to the scroll destination.
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
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.
Amaaaaazin' Thank you so much. Works perfect.
Thomas
Your welcome. Glad I helped.