0

I'm using the following code for a simple toggle button to show/hide some extra content:

    $(".toggle .button").click(function() {
    $(this).next().slideToggle('fast');
});

The problem is if the toggle is at the bottom of the screen, the user has to then scroll down to view the newly opened toggle content. So my question is: how can I make it so the toggled data is automatically shown to the user by jumping the window to the correct position when they click the toggle?

Thanks

user1280853
  • 1,079
  • 5
  • 14
  • 23
  • This link may help you http://stackoverflow.com/questions/3464876/javascript-get-window-x-y-position-for-scroll – polin Oct 09 '12 at 11:57

1 Answers1

1

You can use animate to do the job:

$('html,body').animate(
   {scrollTop: $('#your-content-id').offset().top},
   'slow'
);
RRikesh
  • 14,112
  • 5
  • 49
  • 70
  • thanks, but I have multiple toggle classes on the page each with a class of .show-details as the toggled content container, how do I target the specific class for the currently toggled element, as I won't be using an ID like your code above. many thanks – user1280853 Oct 09 '12 at 12:26
  • you can add an attribute to each element you want to target, then use the `.attr()` function to match them. – RRikesh Oct 09 '12 at 12:34